Maison >interface Web >tutoriel CSS >Comment puis-je créer une barre de navigation à deux lignes dans Bootstrap 4 ?

Comment puis-je créer une barre de navigation à deux lignes dans Bootstrap 4 ?

Susan Sarandonoriginal: 2024-12-10 00:55:10216parcourir

How can I create a two-row navbar in Bootstrap 4?

Barre de navigation Bootstrap 4 avec 2 lignes

Dans Bootstrap 4, il est possible de créer une barre de navigation avec deux lignes en utilisant les classes utilitaires flexbox. Voici comment y parvenir :

Ajoutez la classe flex-column au div .navbar-collapse. Cela empilera les deux barres de navigation verticalement.

Définissez la propriété flex-direction: column sur l'élément .navbar-brand. Cela alignera le logo verticalement avec les liens de la barre de navigation.

Facultativement, vous pouvez ajouter la classe flex-row à la deuxième barre de navigation. pour aligner les icônes horizontalement.

Voici une version mise à jour de votre code :


    
        
        
        
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!
bootstrap using class Property this column flex ul
Déclaration：Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer une liste non ordonnée à deux colonnes à l'aide de CSS et JavaScript ?Article suivant：Comment créer une liste non ordonnée à deux colonnes à l'aide de CSS et JavaScript ?

Articles Liés

Voir plus