bootstrap-dropdown不显示其应该的下拉列表

Question

我想让bootstrap-dropdown.js工作。但它运作不正常。它会显示一个下拉菜单，但不会显示在正确的位置。

我附上了截图来证明这个问题。此外，这里是一个链接，演示了我正在处理jsfiddle

的问题

在这方面的任何帮助都将受到高度赞赏。

这就是我添加nav-pills和下拉列表的方式（如文档中所述）

<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