Bootstrap下拉菜单

我正在使用引导来创建一个下拉菜单。但是，当我单击Dropdown1时，Dropdown1的内容将覆盖菜单Dropdown2。我想要的是，当我点击Dropdown1时，它的菜单应该在Dropdown1和Dropdown2之间，或者Dropdown1的内容打开时应该向下推。Bootstrap下拉菜单

这是我正在申请的代码;

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 



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

<div class="container"> 

    <div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown1 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">python</a></li> 
     <li><a href="#">java</a></li> 
    </ul> 
    </div> 
</div> 
<div class="container"> 

    <div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown2 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">C#</a></li> 
     <li><a href="#">perl</a></li> 
    </ul> 
    </div> 
</div> 


</body> 
</html>

来源

2016-12-25 Pela647

添加到您的CSS：

ul.dropdown-menu{ 
    position:static; 
    float:none; 
    width:150px; 
}

看到它在这里工作：

ul.dropdown-menu{ 
 
    position:static; 
 
    float:none; 
 
    width:150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
     
 
     <div class="dropdown clearfix"> 
 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown1 
 
     <span class="caret"></span></button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">HTML</a></li> 
 
      <li><a href="#">CSS</a></li> 
 
      <li><a href="#">python</a></li> 
 
      <li><a href="#">java</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     
 
     <div class="dropdown"> 
 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown2 
 
     <span class="caret"></span></button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">HTML</a></li> 
 
      <li><a href="#">CSS</a></li> 
 
      <li><a href="#">C#</a></li> 
 
      <li><a href="#">perl</a></li> 
 
     </ul> 
 
     </div> 
 
    </div>

来源

2016-12-25 14:37:50 ab29007

谢谢大家的响应，它是可以正常使用！！ – Pela647

Bootstrap下拉菜单

回答

相关问题