Bootstrap Dropdown Menus表现得很奇怪

时间:2016-07-21 23:44:19

标签: javascript html css twitter-bootstrap twitter-bootstrap-3

我在我的网站上添加了Bootstrap Dropdowns,其中一个根本不起作用。点击时其他三个掉落,但是相当混乱。我无法让小提琴工作,所以这里有一个搞砸了的截图和一些实际的“下拉”部分出现在左边的截图,所以你明白了。 The Screenshot

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。如果有人能发现我的问题,我们将非常感激。

1 个答案:

答案 0 :(得分:2)

你错过了div包装应该有.dropdown

类的整个东西

这是一个小提示,显示它正在运作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>