Bootstrap Dropdown-Menü

Ich verwende Bootstrap, um ein Dropdown-Menü zu erstellen. Wenn ich jedoch auf Dropdown1 klicke, wird der Inhalt von Dropdown1 das Menü Dropdown2 abdecken. Was ich will ist, wenn ich auf Dropdown1 klicke, sollte das Menü zwischen Dropdown1 und Dropdown2 sein oder Dropdown2 sollte nach unten gedrückt werden, wenn der Inhalt von Dropdown1 geöffnet wird.Bootstrap Dropdown-Menü

Dies ist der Code, den ich anwende;

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

Quelle

2016-12-25 Pela647

Fügen Sie diese in Ihrem CSS:

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

Sie dafür, hier zu arbeiten:

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>

Quelle

2016-12-25 14:37:50 ab29007

danke für die Antwort, es funktioniert perfekt !!! !! – Pela647

Bootstrap Dropdown-Menü

Antwort

Verwandte Themen