ブートストラップドロップダウンメニュー

私はブートストラップを使ってドロップダウンメニューを作成しています。しかし、Dropdown1をクリックすると、Dropdown1の内容がメニューDropdown2をカバーします。 Dropdown1をクリックするとDropdown1とDropdown2の間にメニューが表示されるか、Dropdown1の内容が開いているときに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>

出典

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

ブートストラップドロップダウンメニュー

答えて

関連する問題