javascript - Bootstrap 下拉菜单表现怪异

Question

我在我的网站上添加了 Bootstrap Dropdowns，但其中一个根本不起作用。其他三个在单击时会掉落，但非常困惑。我无法让 Fiddle 工作，所以这里是其中一个困惑的屏幕截图和一些实际的“下拉”部分出现在左侧，所以你明白了。

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="dropdown">
    <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Example
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li class="dropdown-header"><b>Example</b></li>
      <li><a href="example1.html">Example 1</a></li>
      <li><a href="example2.html">Example 2</a></li>
      <li><a href="example3.html">Example 3</a></li>
      <li><a href="example4.html">Example 4</a></li>
      <li><a href="example5.html">Example 5</a></li>
    </ul>
  </div>
</div>

我没有添加 CSS 或 JavaScript，因为它只是 Bootstrap。如果有人能发现我的问题，将不胜感激。

Answer 1

你错过了包裹整个东西的 div，它应该有 .dropdown

类

这是一个 fiddle ，向您展示它的工作原理 Fiddle Demo

它应该如下所示:

        <div class="container">
          <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Example
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li class="dropdown-header"><b>Example</b></li>
                <li><a href="example1.html">Example 1</a></li>
                <li><a href="example2.html">Example 2</a></li>
                <li><a href="example3.html">Example 3</a></li>
                <li><a href="example4.html">Example 4</a></li>
                <li><a href="example5.html">Example 5</a></li>
            </ul>
          </div>
        </div>