Bootstrap Menu déroulant

J'utilise bootstrap pour créer un menu déroulant. Cependant, lorsque je clique sur Dropdown1, le contenu de Dropdown1 couvre le menu Dropdown2. Ce que je veux, c'est quand je clique sur Dropdown1, son menu devrait être entre Dropdown1 et Dropdown2 ou Dropdown2 devrait être poussé vers le bas lorsque le contenu de Dropdown1 ouvert.Bootstrap Menu déroulant

Ceci est le code que j'applique;

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

Source

2016-12-25 Pela647

Ajouter à votre css:

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

voir travailler ici:

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>

Source

2016-12-25 14:37:50 ab29007

merci pour la réponse, il fonctionne parfaitement !!! !! – Pela647

Bootstrap Menu déroulant

Répondre

Questions connexes