drop-down-menu - 下拉菜单在不正确的导航栏项目下方呈现

Question

我正在使用 Bootstrap 2 构建一个站点，我想为导航栏中的一个项目添加一个下拉菜单。

足够简单。但是，当下拉菜单展开时，它会出现在导航栏中不正确的项目下方:



请注意，在上面的屏幕截图中，下拉列表呈现在“Admin”(最左侧的导航栏元素)而不是“Locator”(激活下拉列表的元素)下方。

如何解决此问题，以便下拉列表出现在正确的导航栏元素下方？

这是导航栏的 HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="...">Dashboard</a>

      <div class="nav-collapse collapse pull-right">
        <ul class="nav">
          <li><a href="...">Admin</a></li>
          <li><a href="...">Find Trips</a></li>

          <!-- Locator Dropdown -->
          <li>
            <a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
                   data-toggle="dropdown" data-target="#">
              Locator
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
              <li><a href="...">My Trips</a></li>
              <li><a href="...">Create Trip</a></li>
            </ul>
          </li>

          <li><a href="...">My Profile</a></li>
          <li><a href="...">Log Out</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

您的下拉列表出现在错误的位置，因为您缺少定义下拉列表相对位置的类。要解决此问题，只需添加 .dropdown使用子菜单将菜单项分类，如下所示:
<li class="dropdown"> ... </li>
这是您的固定标记:

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="...">Dashboard</a>

      <div class="nav-collapse collapse pull-right">
        <ul class="nav">
          <li><a href="...">Admin</a></li>
          <li><a href="...">Find Trips</a></li>

          <!-- Locator Dropdown -->
          <li class="dropdown">
            <a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
                   data-toggle="dropdown" data-target="#">
              Locator
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
              <li><a href="...">My Trips</a></li>
              <li><a href="...">Create Trip</a></li>
            </ul>
          </li>

          <li><a href="...">My Profile</a></li>
          <li><a href="...">Log Out</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>