Démarreur horizontal
Prendre un coup d'oeil à cette image:
exemple http://i42.tinypic.com/wvbf3a.png
Je veux la liste des éléments du menu pour être pile de gauche à droite (horizontalement).
Je ne peux pas sembler obtenir que cela fonctionne, essayé à l'aide de la liste des "inline" class mentionné dans la
la documentation officielle, cela ne fait qu'empirer les choses.
Voici le code HTML:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">List Item</a>
<ul class="dropdown-menu">
<li><a href="#" id="">1</a></li>
<li><a href="#" id="">2</a></li>
<li><a href="#" id="">1</a></li>
<li><a href="#" id="">2</a></li>
<li><a href="#" id="">3</a></li>
<li><a href="#" id="">4</a></li>
<li><a href="#" id="">5</a></li>
<li><a href="#" id="">6</a></li>
</ul>
</li>
</ul>
</nav>
Je suis en utilisant Bootstrap 3
source d'informationauteur elad.chen
Vous devez vous connecter pour publier un commentaire.
Joindre ceux
li
dans unul
liste et la classe commelist-inline
comme ceCochez cette capture d'écran
Ici est la JSFiddle
Updates1:
Comme je l'ai mentionné dans les commentaires,
class: dropdown-menu
a lamin-width as 160px
. Par conséquent, il est fixé à la largeur. Essayez de le remplacer.Updates2:
Comme je l'ai mentionné dans les commentaires, bootstrap a un certain style par défaut qui peut être substituée comme
Encas si vous vous sentez que cela affecte les autres éléments, puis écraser à l'aide
id
sélecteur.Trouver la différence dans ce JSFiddle
Une pleine largeur - 100% de la largeur du menu option devrait être possible
.navbar-nav {position: relative; }
li.dropdown {position: static;}
.dropdown-menu {width: 100%;}
.dropdown-menu > li {display: inline-block;}
ou penser de cela... l'idée de base est de faire la liste déroulante en fonction de la position du menu et non pas la li... comme migli souligne à juste titre
la dropdown-menu est limité par la largeur de ses li conteneur.
juste ajouter :
Une combinaison de
avec
et quelques autres styles a fonctionné pour moi.
Merci!
À ajouter à @dj.cowan de solution, j'ai enlevé le .navbar-nav propriété position en utilisant à la place la valeur par défaut .barre de navigation de position, qui a ensuite fait la liste déroulante 100% de la largeur de la page. J'ai ensuite ajouté float:right pour le li de gamme sous la barre de navigation à droite.
li.dropdown {position: static; float:right}
.dropdown-menu {width: 100%;}
.dropdown-menu > li {display: inline-block;}