drop-down-menu - ドロップダウン メニューが不適切なナビゲーション バー項目の下に表示される

Question

Bootstrap 2 でサイトを構築しています。ナビゲーション バーの 1 つの項目にドロップダウン メニューを追加したいと考えています。

十分に単純です。ただし、ドロップダウンを展開すると、ナビゲーション バーの間違った項目の下に表示されます。

上のスクリーンショットでは、ドロップダウンが「ロケーター」(ドロップダウンをアクティブにする要素) ではなく「管理者」(左端のナビゲーション バー要素) の下にレンダリングされることに注意してください。

正しい navbar 要素の下にドロップダウンが表示されるようにするにはどうすればよいですか?

ナビゲーションバーの 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>