Question

我在下拉菜单中遇到一个小问题，其中下拉菜单本身出现在左侧，请参阅此图片以查看我的意思：

HTML代码：

    <div class= "header-bar">

  <a class="btn btn-primary" href="/">Home</a>


    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>

DIV的CSS代码＆＃34;标题栏＆＃34;：

    #header-bar{
width:100%;
height: 100px;
left: 100px;
position: absolute;
z-index: 100000;
padding: 35px;

}

我认为它与溢出有关。

非常感谢！

Answer 1

您需要将下拉按钮放在<div class="btn-group"></div>内。请参阅Docs。

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

请参阅整页的工作代码段。

/**JUST FOR DEMO PURPOSES**/

.navbar.navbar-default {
  background: none;
  border: none;
}
.navbar .header-bar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar .navbar-brand {
  padding-top: 0;
}
/**JUST FOR DEMO PURPOSES**/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container">
    <div class="header-bar">
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/150x50/000">
      </a>
      <div class="pull-right">
        <a class="btn btn-primary navbar-btn" href="/">Home</a>
        <div class="btn-group">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
            <li><a href="#">JavaScript</a>
            </li>
          </ul>
        </div>
        <div class="btn-group">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
            <li><a href="#">JavaScript</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

Bootstrap下拉列表左侧：

1 个答案: