Comment créer une barre de navigation Bootstrap 4 à deux rangées avec des menus empilés verticalement ?

Création d'une barre de navigation Bootstrap 4 avec deux lignes

Le défi

Dans Bootstrap 4, les utilisateurs sont souvent confrontés au défi de structurer une barre de navigation avec une barre de navigation distincte. disposition : une marque/icône bien visible à gauche et deux menus de barre de navigation alignés verticalement à droite. L'objectif est d'obtenir une mise en page où les deux menus occupent des lignes séparées à droite de l'icône.

Solution : Utiliser Flexbox

Pour aligner les menus verticalement, nous pouvons exploiter la flexbox à colonne flexible classe utilitaire sur le div navbar-collapse. Cela définit la colonne flex-direction: pour les éléments enfants du div, en garantissant qu'ils s'empilent verticalement.

<div>

Considérations supplémentaires

Pour une personnalisation et un alignement améliorés, tenez compte des conseils suivants :

• Ajustement de la taille de l'icône : Si l'icône est trop grande ou trop petite, utilisez la taille de la police pour ajuster sa taille. size.
• Création d'un espace entre les menus :Ajoutez un espace vertical entre les menus en utilisant margin-top sur la deuxième barre de navigation.
• Alignement des menus à droite : Utilisez margin-left: auto sur les classes navbar-nav pour les aligner à droite du icône.

Avec ces ajustements, vous pouvez créer une barre de navigation Bootstrap 4 avec deux menus empilés verticalement, comme vous le souhaitez.

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!