如何使整个导航栏项目可点击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 S，buttons和p标签，你应该使用ul S和li秒。此外，您的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>