Comment centrer un élément dans une barre de navigation Bootstrap ?

Centrage des éléments dans la barre de navigation Bootstrap

Problème : Malgré diverses tentatives, l'utilisateur ne parvient pas à centrer un élément dans une barre de navigation Bootstrap.

Réponse :

Bootstrap 5 (2021)

La Navbar utilise flexbox, vous permettant de centrer les éléments à l'aide de la classe mx-auto.

<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
    </ul>
    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Bootstrap 4.1

Pour Bootstrap 4.1 et supérieur, utilisez mx-auto au lieu de pull-left et pull-right pour aligner la gauche et la droite menus :

<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
    </ul>
    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Autres options de centrage

• Position : absolue ;: Définissez l'élément à centrer sur la position : absolue ; et utilisez transform: translateX(-50%);.
• Imbrication Flexbox : Faites en sorte que l'élément centré affiche également : flexbox et justifier-content: center.

Rappelez-vous que ces solutions peuvent présenter des inconvénients, comme ne pas aligner parfaitement l'élément centré avec les éléments adjacents de taille variable. largeurs.

Remarques supplémentaires :

• Assurez-vous de remplacer main-nav par le nom de classe de votre barre de navigation souhaitée.
• Si votre barre de navigation a une seule barre de navigation, utilisez justifier-content-center pour la centrer.
• Pour centrer les éléments sur le bureau mais les aligner à gauche sur le mobile, utilisez des requêtes multimédias.
• Explorez la [documentation Bootstrap](https://getbootstrap.com/docs/4.5/components/navbar/) pour plus d'informations sur la personnalisation de la barre de navigation.

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!