Comment créer une barre de navigation Bootstrap 4 à deux rangées ?

Créer une barre de navigation Bootstrap 4 avec deux lignes

La configuration d'une barre de navigation Bootstrap 4 avec deux lignes est simple, permettant des arrangements polyvalents sur votre page web. Pour y parvenir, utilisez la classe utilitaire flexbox flex-column sur le div navbar-collapse, en vous assurant que les éléments enfants s'alignent verticalement.

1. Ajoutez la classe flex-column :

   Enveloppez le div navbar-collapse avec la classe flex-column pour obtenir un résultat vertical alignement.

   <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3">

   Copier après la connexion

2. Alignement et rembourrage facultatifs :

   Si vous le souhaitez, ajoutez un alignement et un rembourrage supplémentaires pour améliorer l'apparence visuelle. Par exemple, pour aligner le texte à droite et ajouter un remplissage vertical aux icônes des réseaux sociaux :

   <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>
       ...
   </ul>

   Copier après la connexion

3. Variations supplémentaires :

   Expérimentez avec des présentations alternatives, comme une barre de navigation avec deux lignes à droite ou une recherche alignée à droite formulaire.

Démo et code :

Voici une démo et le code correspondant pour une barre de navigation avec deux lignes :

• [Démo](https://jsfiddle.net/lot99)
• [Code](https:// codepen.io/anon/pen/VEPqpe?editors=1010)
  

Remarque :

Dans Bootstrap 4.0.0 et versions ultérieures, assurez-vous d'utiliser le code mis à jour conformément aux liens fournis pour des raisons de compatibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!