Bootstrap 4 navbar avec 2 lignes
j'ai créé une navbar avec Bootstrap 4 alpha 6 qui a une grande marque/icône sur la gauche, et 2 navbar-nav's avec des liens à la droite de l'icône. Un nav a des liens, et l'autre nav a des icônes. Ça marche exactement comme je veux, sauf pour une chose.
j'aimerais que les 2 navbars à apparaître dans 2 lignes à droite de l'icône. Comme ceci:
------------------------------------------------------
link link link link
brand-icon -------------------------------------------
icon icon icon
------------------------------------------------------
la version mobile montrera toujours les liens verticalement comme elle le fait maintenant. J'ai essayé plusieurs choses différentes avec flexbox, mais ça ne marche pas.
Voici mon code:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
2 réponses
Vous pouvez utiliser le flex-column classe utilitaire flexbox pour empiler les 2 navs verticalement à côté de l'icône. Ce jeux flex-direction: column sur le navbar-collapse div de sorte que ce soit des éléments enfants empilés verticalement.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1>
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2">
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Démo - Bootstrap 4 barre de navigation avec 2 lignes
Voici une autre variation avec les 2 lignes et droit recherche d'alignement forme:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand my-auto" href="#">Brand</a>
<div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
<ul class="navbar-nav ml-auto small">
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<form class="form-inline ml-auto">
...
</form>
</div>
</nav>
Demo-Navbar avec 2 lignes à droite
mise à jour pour Bootstrap 4.0.0:
https://www.codeply.com/go/05hEHoiUvv
voici un scénario alternatif avec 2 navbars avec un toggler mobile
Bootstrap 4.0-deux Navbar qui s'effondrent en une seule bascule
Comment puis-je avoir Brand et Navbar sur des lignes séparées?
la "variation avec les 2 lignes alignées à droite" n'a pas aligné à droite les lignes dans Safari pour moi. J'ai mis les listes non ordonnées dans une nouvelle div flex-column et ml-auto classes.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
<h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<div class="flex-column ml-auto">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Product</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li>
</ul>
</div>
</div>
</div>
</nav>