Comment centrer le contenu dans une barre de navigation Bootstrap réactive ?

Comment centrer le contenu dans une barre de navigation Bootstrap réactive

Vous avez du mal à aligner le contenu dans votre barre de navigation Bootstrap ? Voici une solution complète qui a fonctionné de manière fiable pour de nombreux utilisateurs.

Comprendre le problème

L'alignement de la barre de navigation par défaut de Bootstrap peut être problématique, en particulier lors du ciblage de mises en page réactives. Le coupable est souvent la propriété float: left associée à la navigation interne.

La solution

Pour centrer le contenu, vous devez supprimer la propriété float: left du navigation intérieure et faites-en un bloc en ligne. De plus, définir la propriété text-align sur center alignera le contenu horizontalement.

Modifications CSS

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

Exemple

La mise en œuvre de ces modifications CSS centrera le contenu dans votre barre de navigation.

<!-- ...navbar code here -->

<style>
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
</style>

<!-- ...navbar code here -->

Considérations supplémentaires

Pour garantir que les modifications d'alignement ne se produisent que pour les barres de navigation non réduites, envisagez d'inclure les modifications CSS dans une requête multimédia appropriée.

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
}

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!