Comment modifier le point d'arrêt d'effondrement de la barre de navigation Bootstrap ?

Comment personnaliser le point d'arrêt d'effondrement de la barre de navigation Bootstrap à l'aide du stylet

Une demande de personnalisation courante pour les barres de navigation Bootstrap consiste à modifier le point d'arrêt auquel la barre de navigation s'effondre. Bien que Bootstrap 3 nécessite de modifier les variables LESS, cela peut être réalisé dans Stylus avec du CSS supplémentaire.

Bootstrap 5

À partir de Bootstrap 5, gestion du point d'arrêt de réduction de la barre de navigation est devenu plus simple. Par défaut, la barre de navigation se réduira en dessous de 992 px. Vous pouvez personnaliser cela en ajoutant la classe .navbar-expand-*, où * représente le point d'arrêt que vous souhaitez utiliser :

• .navbar-expand-sm : menu mobile en dessous de 576px
• .navbar-expand-md : menu mobile en dessous de 768 px
• .navbar-expand-lg : menu mobile en dessous de 768 px 992px
• .navbar-expand-xl : menu mobile en dessous de 1200px
• .navbar-expand : barre de navigation toujours développée
• (Aucune classe d'extension) : barre de navigation toujours réduite

Bootstrap 4

Dans Bootstrap 4, vous pouvez utiliser les mêmes classes .navbar-expand-* que dans Bootstrap 5. De plus, vous pouvez créer des points d'arrêt personnalisés à l'aide de CSS personnalisés :

@media (min-width: 1300px) {
  .navbar-expand-custom {
    // Custom CSS rules for navbar expansion
  }
}

Bootstrap 3

Pour Bootstrap 3, voici le fonctionnement CSS :

@media (max-width: 991px) {
  // CSS rules to override the default collapse breakpoint
}

Remplacez 991px par le point d'arrêt souhaité. Cela réduira la barre de navigation en dessous de la largeur de pixel spécifiée.

Remarque pour les points d'arrêt inférieurs à 768 px

Si vous devez définir un point d'arrêt inférieur à 768 px, de légers ajustements au CSS ci-dessus sont nécessaires. Reportez-vous aux liens fournis pour des explications détaillées.

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!