如何使整个导航栏项在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>