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

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

Lors de l'utilisation de Bootstrap, le point d'arrêt par défaut pour l'effondrement de la barre de navigation est défini sur 768 px. Bien que cela puisse convenir à la plupart des cas, il existe des cas où vous souhaiterez peut-être modifier ce point d'arrêt pour mieux répondre à vos besoins spécifiques. Cet article vous guidera à travers différentes méthodes pour y parvenir sans recourir à LESS.

Bootstrap 5 et versions ultérieures

Dans les versions Bootstrap 5 et ultérieures, la réduction de la barre de navigation est gérée via les classes "navbar-expand-*". Voici une répartition :

• .navbar-expand : Pas de réduction
• .navbar-expand-sm : Réduire sur les écrans inférieurs à 576 px
• .navbar-expand- md : Réduire sur les écrans plus petits que 768px
• .navbar-expand-lg : Réduire sur les écrans inférieurs à 992 px
• .navbar-expand-xl : Réduire sur les écrans inférieurs à 1 200 px

Bootstrap 4

De même dans Bootstrap 4, vous pouvez utiliser les classes navbar-expand-* :

• .navbar-expand-sm : Réduire sur les écrans inférieurs à 576 px
• .navbar-expand-md : Réduire sur les écrans inférieurs à 768 pixels
• .navbar-expand-lg : Réduire sur les écrans inférieurs à 992px
• .navbar-expand-xl : Réduire sur les écrans inférieurs à 1200px

Cependant, si vous avez besoin d'un point d'arrêt personnalisé, vous pouvez utiliser le CSS suivant :

@media (min-width: 1300px) {
  .navbar-expand-custom {
    /* Customize navbar behavior at your specific breakpoint */
  }
}

Amorçage 3 (3.3.x)

Pour Bootstrap 3.3.x, vous pouvez remplacer le point d'arrêt de la barre de navigation avec du CSS personnalisé :

@media (max-width: 991px) {
  /* Override navbar collapsing point at 991px */
  /* Adjust collapse point as needed */
}

Remarque : Le CSS personnalisé fourni ici convient à la définition de points d’arrêt supérieurs à 768 px. Pour les points d'arrêt inférieurs à 768 px, reportez-vous à l'exemple fourni dans la question.

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!