如何使整個導航欄項在Bootstrap下拉菜單中都可單擊？

Question

我在導航欄中有一個按鈕，希望完全單擊該按鈕才能打開下拉菜單。 我似乎無法實現。 如果我添加margin而不是padding ，則會使它更加混亂。 我在這里做錯了什么？

我基本上希望整個按鈕都可單擊，而不僅僅是文本部分。

我的標記是這樣的：

<div class="header_wrapper">
<div class="header_right">


<div class="dropdown" id="btn_menu">
                <button class="right_side_toggle dropdown-toggle js-flyout-toggle">
                <p class="hidden-xs right_side_toggle_label 
                dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" 
                aria-haspopup="true" aria-expanded="false">
                <span id="js-account-title">Menu</span></p>

                  <ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>

                </button>

</div>

</div>
</div>

並使其變得更簡單： https ： //jsfiddle.net/wx3udazj/1/

任何提示或幫助，我們將不勝感激！ :)

Answer 1

您似乎在使用div ， buttons和p標簽的地方使用了ul s和li s。 此外，在這種情況下， dropdown-menu不應位於觸發它的元素之內。

那，和一些css調整，您將被排序：

 .header_wrapper { min-height: 70px; z-index: 1030; background-color: #FFF; position: relative; top: 0; width: 100%; z-index: 100; border-bottom: 1px solid #c4c4c4; } .header_right>ul { margin-bottom: 0px; } .header_right { width: 33.33%; text-align: right; } #btn_menu { display: inline-block; border-left: 1px solid #c4c4c4; border-right: 1px solid #c4c4c4; } .right_side_toggle { background: none; border: none; outline: none; padding: 0; position: relative; top: 0px; padding: 20px 20px; line-height: 30px; } .right_side_toggle div { padding: 20px 0px; } .right_side_toggle_label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-weight: 500; color: inherit; padding-right: 0px; position: relative; text-align: left; top: 0px; font-size: 14px; margin: 0px 30px 0px 30px; 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="header_wrapper"> <div class="header_right"> <ul> <li class="dropdown" id="btn_menu"> <div class="right_side_toggle dropdown-toggle js-flyout-toggle" aria-labelledby="dropdownMenu1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span id="js-account-title">Menu</span> </div> <ul class="dropdown-menu "> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </li> </ul> </div> </div>