html - Bootstrap 下拉菜单向左移动 :

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 代码:

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