Comment étirer les éléments d'une barre de navigation Bootstrap pour utiliser toute la largeur?
Envisager la suite de "Bootstrap" de la barre de navigation:
quelques faits sur cette barre de navigation:
- Le bar lui-même est exactement 620 px de large (largeur de la page)
- Le bar est sensible (effondrement point d'arrêt à 640px)
- La barre éléments se collent (pas d'espace entre les deux)
- la barre est supportée par plusieurs langues (la largeur des éléments change)
Comment puis-je étirer les éléments de la barre pour utiliser toute la largeur? L'espace libre restant à droite doit être réparti entre les éléments de la barre. Puisque chaque élément a une largeur différente et que cette largeur peut varier d'une langue à l'autre, Je ne peux pas travailler avec des pourcentages. Je suppose que la seule solution sera JavaScript. Mais je ne trouve aucun exemple...
Js Fiddle Démo: http://jsfiddle.net/zBM6D/3/
<body>
<div id="page">
<header id="header">
<nav class="navbar navbar-default roboto normal" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigation-elements">
<ul class="nav navbar-nav">
<li class="active"><a href="#">START</a>
</li>
<li><a href="#">THESE</a>
</li>
<li><a href="#">ARE</a>
</li>
<li><a href="#">SOME</a>
</li>
<li><a href="#">ELEMENTS</a>
</li>
<li><a href="#">WITH</a>
</li>
<li><a href="#">DIFFERENT</a>
</li>
<li><a href="#">WIDTHS</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="clear"></div>
</header>
</div>
</body>
2 réponses
vous pouvez utiliser la disposition d'affichage de Table CSS pour distribuer vos articles nav. Ses bien supporté par les navigateurs et simple à mettre en place:
.navbar-nav {
display:table;
width:100%;
margin: 0;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}
Cela fait 100% de la largeur de son parent #header, qui à son tour est limité par la largeur de #page, donc si vous en avez besoin pour couvrir 100% de la largeur totale du document, vous devrez le déplacer hors de #page ou faire #page plus large.
basé sur la réponse de @Moob, j'ai créé un gist qui devrait le faire gentiment:
https://gist.github.com/lukaszbachman/48774b74b6c4e9d0f4cb#file-navigation-stretch-css