Comment puis-je remplacer le point d'arrêt d'effondrement de la barre de navigation Bootstrap ?

Remplacement du point d'arrêt d'effondrement de la barre de navigation Bootstrap

Certains scénarios nécessitent de modifier le point d'arrêt d'effondrement par défaut de la barre de navigation de Bootstrap, défini sur 768 pixels. Ce guide étudie des méthodes alternatives pour modifier ce comportement sans recourir à LESS.

Bootstrap 5 (mise à jour 2023)

Bootstrap 5 introduit une approche simplifiée. Ajoutez simplement la classe .navbar-expand à la barre de navigation pour une barre de navigation fixe (ne s'effondrant jamais). Pour une barre de navigation définitivement réduite, omettez complètement la classe.

Bootstrap 4 (mise à jour 2018)

Bootstrap 4 améliore le contrôle des points d'arrêt de la barre de navigation avec l'introduction de .navbar-expand- * classes :

• .navbar-expand-sm : menu mobile sur largeurs d'écran inférieures à 576 px
• .navbar-expand-md : menu mobile pour des largeurs d'écran inférieures à 768 px
• .navbar-expand-lg : menu mobile pour des largeurs d'écran inférieures à 992 px
• .navbar-expand-xl : menu mobile pour des largeurs d'écran inférieures à 1200px
• .navbar-expand : barre de navigation fixe, ne s'effondre jamais
• (Pas de classe d'extension) : toujours afficher le menu mobile

Vous pouvez également définir un point d'arrêt personnalisé :

@media (min-width: 1300px) {
  .navbar-expand-custom {
    flex-direction: row;
    ...
  }
}

Bootstrap 3

Pour Bootstrap 3.3.x, vous pouvez remplacer le point d'arrêt en utilisant le CSS suivant :

@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  ...
}

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!