Bootstrap 4 navbar avec 2 lignes
J'ai créé une barre de navigation avec Bootstrap 4 alpha 6 qui a une grande marque/icone sur la gauche, et 2 navbar-nav avec des liens à droite de l'icône. Une nav a des liens, et de l'autre nav a des icônes. Il fonctionne exactement comme je le veux, sauf pour une chose.
J'aimerais le 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 sera toujours montrer les liens verticalement comme il le fait maintenant. J'ai essayé plusieurs choses différentes avec flexbox, mais ne peut pas le faire fonctionner.
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>
source d'informationauteur Tom Michew
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser le
flex-column
flexbox classe utilitaire pour empiler les 2 trajets verticalement à côté de l'icône. Ce jeuxflex-direction: column
sur lenavbar-collapse
div, de sorte que c'est l'enfant des éléments de la pile à la verticale.Démo - Bootstrap 4 barre de navigation avec 2 rangées
Voici une autre variation avec les 2 lignes et droit aligner formulaire de recherche:
Démo - Navbar avec 2 lignes sur la droite
Mise à jour pour Bootstrap 4.0.0:
https://www.codeply.com/go/05hEHoiUvv
Voici un autre scénario avec 2 navbars avec un mobile activation /désactivation d'
Bootstrap 4.0 - Deux NavBars que l'effondrement dans une bascule
Comment puis-je avoir la Marque et de la barre de navigation sur des lignes distinctes?
La variation "avec la ligne 2, aligné à droite" n'a pas le droit d'aligner les lignes de Safari pour moi. J'ai mis les listes non ordonnées dans une nouvelle div avec la
flex-column
etml-auto
classes.