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

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

Centrer le contenu dans une barre de navigation Bootstrap peut être une tâche frustrante, surtout lorsque les suggestions courantes les solutions échouent. Cet article fournira une méthode simple et efficace pour résoudre ce problème.

La structure HTML de votre barre de navigation semble standard. Cependant, le style CSS est légèrement erroné. Bootstrap aligne le contenu de la barre de navigation vers la gauche par défaut. Pour le centrer, suivez ces étapes :

1. Supprimez le float : left de .navbar .navbar-nav : Cette modification supprime l'alignement à gauche de la navigation interne.
2. Définissez .navbar .navbar-nav pour afficher : inline-block : Ceci convertit les liens de navigation en éléments en ligne.
3. Centrer le texte dans .navbar .navbar-collapse : Cette étape centre le contenu lorsque la navigation se réduit.

Voici le CSS mis à jour :

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

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

Cette solution devrait centrer le contenu dans toutes les tailles d'écran. Cependant, si vous souhaitez cet effet uniquement lorsque la barre de navigation n'est pas réduite, vous pouvez utiliser une requête multimédia :

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

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

Cela appliquera l'effet de centrage uniquement lorsque la largeur de l'écran est supérieure ou égale à 768 pixels. Ajustez le point d'arrêt selon les besoins de votre conception.

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!