Barre de navigation pliable empilable dans bootstrap 4
Je voudrais créer un réductible navbar
. Tout fonctionne, mais le nav
éléments ne sont pas empilés sous les uns les autres comme il le devrait. Ils sont les uns à coté des autres.
Code:
<nav class="navbar navbar-light bg-faded" role="navigation">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="collapsing-navbar">
<a class="navbar-brand" href="/">Logo</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="/messages" class="nav-link">Messages</a>
</li>
<li class="nav-item">
<a href="/logout" class="nav-link">Logout</a>
</li>
</ul>
</div>
</nav>
Capture d'écran:
source d'informationauteur Iter Ator
Vous devez vous connecter pour publier un commentaire.
Bootstrap 4 Alpha 6 (depuis l'alpha 6 version empilés menu est intégré, pas besoin d'utiliser des CSS):
CODEPEN
Il semble qu'il est plus facile de faire avec cette CSS remplacent:http://codeply.com/go/Ar1H2G4JVH
Mise à JOUR
De BS4 alpha 6, le supplémentaire CSS n'est plus nécessaire. La barre de navigation de balisage a changé.
http://www.codeply.com/go/0OMz6nfPLr
De Bootstrap 4 Alpha 5 vous pouvez tirer parti d'une
collapse
plugin:http://v4-alpha.getbootstrap.com/components/navbar/
Bootstrap 4 montre un peu différente de l'expérience utilisateur lors de la réductible menu.
En version alpha, il ressemble cette. En revanche, la question est encore ouverte Icinous pouvons voir quelques changements dans la prochaine version.