Bootstrap下拉菜单代理奇怪

Question

我将Bootstrap Dropdowns添加到我的网站，其中一个根本不起作用。点击后其他三个下降，但相当混乱。我无法得到一个小提琴的工作，所以这里有一个搞砸了的截图，还有一些实际的“下拉”部分出现在左边，所以你明白了。

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，因为它只是引导。如果任何人都可以发现我的问题，这将是真正的赞赏。

Answer 1

你缺少的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>