ドロップダウンメニューが正しくないnavbar項目の下にレンダリングする

Question

私はBootstrap 2でサイトを構築していますが、Navbarの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>