Comment centrer avec précision les liens de navigation dans une barre de navigation Bootstrap 4 ?

Centrage des éléments de navigation dans Bootstrap

La tâche de centrer les liens de navigation dans une barre de navigation Bootstrap 4, par rapport à la taille de la fenêtre du navigateur, a s'est avéré être un défi commun. Bien qu'une solution simple utilisant ml-auto et mr-auto puisse s'en rapprocher, elle ne permet pas d'obtenir un centrage précis.

Pour résoudre ce problème, nous proposons une approche complète qui utilise les utilitaires flexbox et margin de manière réactive.

Bootstrap 4 Alpha 6 et versions ultérieures

Dans les versions Bootstrap 4 Alpha 6 et supérieures, le code suivant fournit à la fois centrage de la marque et des liens :

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <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">

Bootstrap 4.1

À partir de Bootstrap 4.1, la stratégie de centrage reste la même. Voici un exemple qui aligne les liens et positionne la marque à gauche sur mobile :

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

Centrage précis des liens dans la fenêtre

Si vous avez besoin d'un centrage exact des liens dans la fenêtre d'affichage, essayez cette approche :

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

Reportez-vous aux liens fournis pour d'autres exemples d'alignement de la barre de navigation dans Bootstrap 4.

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!