Comment puis-je modifier le point d'arrêt d'effondrement de la barre de navigation Bootstrap sans utiliser LESS ?

Comment ajuster le point d'arrêt d'effondrement de la barre de navigation Bootstrap sans LESS

La barre de navigation Bootstrap 3 s'effondre par défaut lorsque la largeur du navigateur descend en dessous de 768 pixels. Ce point d'arrêt peut être ajusté à une valeur personnalisée à l'aide de remplacements CSS. Voici comment procéder sans recourir à LESS :

Bootstrap 5 (mise à jour 2023)

• Pour une barre de navigation qui ne s'effondre jamais, ajoutez le .navbar-expand class.
• Pour une barre de navigation qui s'effondre toujours, n'utilisez pas .navbar-expand.

Bootstrap 4 (mise à jour 2018)

• Utilisez les classes .navbar-expand-* pour spécifier les point d'arrêt souhaité.

  • .navbar-expand-sm : Réduire ci-dessous 576px
  • .navbar-expand-md : Réduire en dessous de 768px
  • .navbar-expand-lg : Réduire en dessous de 992px
  • .navbar-expand-xl : Réduire en dessous de 1200px
  • .navbar-expand : Jamais Réduire
  • (Aucune classe d'expansion) : Toujours réduire
• Pour les points d'arrêt personnalisés, utilisez CSS :

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

Bootstrap 3 (avant 2018)

• Remplacez le point d'arrêt par défaut par ce qui suit CSS :

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

• Remplacez "991px" par le point d'arrêt souhaité.

Remarques :

• Les méthodes ci-dessus remplacent le comportement par défaut de toutes les pages.
• Vous pouvez utiliser des médias spécifiques à l'appareil requêtes pour cibler différents points d'arrêt sur différents appareils.
• N'oubliez pas de tester minutieusement vos modifications pour vous assurer qu'elles ne perturbent aucun autre aspect de votre site Web.

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!