Question

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

这是我正在申请的代码;

    <!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>

Answer 1

将此添加到您的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>

Bootstrap下拉菜单

1 个答案: