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和li s。此外，您的dropdown-menu不应该在此上下文中触发它的元素内部。

那个，以及一些css调整，你将被分类：

＆＃13;

.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;

＆＃13;

<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>

＆＃13;

如何使Bootstrap下拉列表中的整个导航栏项目可单击？

1 个答案: