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">
   <li>
   <p><strong>Alignement et rembourrage facultatifs :</strong></p>
   <p>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 :</p>
   <pre class="brush:php;toolbar:false">

   ...

2. 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é.