Comment puis-je centrer les éléments de navigation dans une barre de navigation Bootstrap ?

Centrage des éléments de navigation dans Bootstrap : un guide complet

La navigation dans les pages Web nécessite un accès simple et intuitif aux éléments de navigation. Un bon alignement des éléments de navigation est crucial pour l’expérience utilisateur et l’attrait visuel. Bootstrap, un framework frontal populaire, fournit une solution pour centrer les éléments de navigation.

Problème :

Un problème courant rencontré lors de l'utilisation de Bootstrap 4 est l'alignement de la navigation. éléments ("éléments de navigation") dans la barre de navigation. Par défaut, ces éléments sont alignés à gauche. Les utilisateurs peuvent souhaiter les centrer à la place. Ajuster l'alignement sans compromettre la fonctionnalité et la réactivité de la barre de navigation est un défi qui nécessite une solution spécifique.

Solution :

Bootstrap 4 propose plusieurs options pour aligner les éléments de navigation , y compris les classes utilitaires mr-auto et ml-auto. Bien que ces classes offrent un certain degré de centrage, elles peuvent ne pas aboutir à un alignement précis dans certains scénarios. Pour un centrage exact, une combinaison des utilitaires flexbox et margin est recommandée.

Bootstrap 4 Alpha 6 :

<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 :

<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">

Ces exemples de code centrent les éléments de navigation horizontalement dans la barre de navigation tout en conservant leur réactivité. La classe utilitaire mx-auto ajuste automatiquement les marges pour garantir que les éléments sont uniformément espacés dans la largeur disponible.

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!