Il y a un problème avec eirenaios réponse:
Lorsque la liste déroulante est contenue dans une barre de navigation pliable, plusieurs <li>
seront affichés sur une ligne (jusqu'à ce qu'elle se termine à la ligne suivante) lorsque la barre de navigation est réduite. Cela semble très laid et déroutant.
Voici la solution, basée sur eirenaios réponse, mais fonctionne aussi pour navbars basculés (pliable) avec dropdowns:
https://plnkr.co/edit/JnsvKGiBokrI1frxC11P?p=preview
EDIT:
règle CSS supplémentaire:
.open > .dropdown-menu {
display: table-caption;
}
HTML (la plupart du temps le même que l'original, mais entouré de .navbar-collapse
et a ajouté .navbar-header
avec un bouton de menu hamburger pour ouvrir le menu affaissée):
<nav class="navbar navbar-default">
<div class="navbar-header" data-toggle="collapse" data-target="#navbar0">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!-- toggled content -->
<div class="collapse navbar-collapse" id="navbar0">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Menu A <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="hz">
<a href="#">Item A1 left</a>
<a href="#">Item A1 right</a>
</li>
<li class="hz">
<a href="#">Item A2 left</a>
<a href="#">Item A2 right</a>
</li>
<li>
<a href="#">Single item A3</a>
</li>
<li class="hz">
<a href="#">Item A3 left</a>
<a href="#">Item A3 right</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Quel est le problème avec la façon dont vous l'avez? Cela devrait les mettre sur la même ligne. – brbcoding
@brbcoding Hmm ... après avoir inspecté l'élément 'Sur la troisième ligne', il semble que Bootstrap cible les liens avec 'dropdown-menu a' dans CSS qui définit' display: Block' et a 'white space: nowrap'. Après avoir écrasé manuellement 'inline-block', en désactivant' l'espace blanc' et en réglant la largeur = 50%, j'ai pu obtenir les deux liens côte à côte ... Cependant, sauriez-vous d'un moyen de les agrandir? la taille du conteneur? Je pense qu'il est un peu étrange que le conteneur 'dropdown-menu' soit une largeur fixe et ne se redimensionne pas automatiquement –