bootstrap-dropdown不顯示其應該在哪裏的下拉列表

Question

我想讓bootstrap-dropdown.js正常工作。但它不能正常工作。它確實顯示下拉菜單，但不在正確的位置。

我附上了一個截圖來演示這個問題。此外，這裏是顯示我正在採取的問題的鏈接jsfiddle

任何在這方面的幫助將不勝感激。

這是怎麼了加入我的NAV-丸和下拉（如文檔中提到）

<div class="navbar masthead"> 
     <ul class="nav nav-pills pull-right"> 
      <li class="active"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Abcdef</a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       </ul> 
      </li> 
      <li> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Abcdef</a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
      </ul> 
      </li> 
      <li> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Abcdef</a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
      </ul> 
      </li> 
      <li> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Abcdef</a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
      </ul> 
      </li> 
     </ul> 
     <h3>Test</h3> 
</div> 

Answer 1

的"dropdown"類添加到每個<li>是應該有一個下拉菜單。見編輯fiddle