Comment centrer parfaitement les éléments de navigation dans une barre de navigation Bootstrap ?

Centrage des éléments de navigation dans Bootstrap

Le défi

Dans Bootstrap, centrer les éléments de navigation (liens) dans la barre de navigation en fonction de la taille de la fenêtre du navigateur peut être une tâche délicate. L'approche Bootstrap standard, utilisant les classes mr-auto et ml-auto, centre efficacement la navigation en fonction de la largeur de la fenêtre du navigateur moins la largeur du logo. Pour obtenir un centrage parfait, nous avons besoin d'une solution plus précise.

La solution

Utiliser Flexbox et Margin Utilities de manière réactive

Bootstrap 4 fournit le d- classes flex et mx-auto, qui nous permettent d'obtenir un centrage réactif. Voici comment procéder :

<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

Dans ce code :

• La classe .d-md-flex rend le conteneur de navigation flexible dans les écrans de taille moyenne (et plus grands) et définit son affichage pour flex.
• La classe .d-block cible les écrans plus petits et fait du conteneur de navigation un block.
• La classe .flex-row organise horizontalement les éléments enfants du conteneur de navigation.
• La classe .mx-md-auto centre le conteneur de navigation horizontalement dans les écrans de taille moyenne et plus grands.
• La classe .mx-0 supprime les marges horizontales dans les écrans plus petits pour garantir un alignement correct.
• Le La classe .mr-auto aligne à droite les éléments de navigation réduits.

Cette approche centre de manière réactive les éléments de navigation en fonction de la taille de la fenêtre du navigateur, garantissant un alignement parfait.

Notes supplémentaires

• Pour Bootstrap 4.1 et supérieur, vous pouvez utiliser .mx-auto directement sur l'élément .navbar-nav pour obtenir le même résultat effet.
• Si vous souhaitez que les éléments de navigation soient exactement centrés dans la fenêtre d'affichage, envisagez d'utiliser une approche de grille CSS.

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!