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>