Comment désactiver l'effondrement de la barre de navigation dans Bootstrap 3 sans remplacements CSS excessifs ?

Bootstrap 3 - Naviguer dans la barre de navigation sans effondrement

Dans Bootstrap 3, la barre de navigation se réduit par défaut sur des tailles d'écran plus petites, offrant ainsi à l'utilisateur- interface conviviale. Cependant, certains scénarios peuvent nécessiter une barre de navigation statique à tout moment. Cet article vous guidera dans la désactivation de la réduction de la barre de navigation sans recourir à des remplacements CSS étendus.

Comprendre le mécanisme de réduction

La réduction de la barre de navigation de Bootstrap est contrôlée par le .navbar-collapse classe. Par défaut, cette classe masque la partie droite du menu pour les appareils situés sous des points d'arrêt spécifiques. Un bouton bascule apparaît à la place, permettant aux utilisateurs d'afficher ou de masquer le menu.

Désactiver le repli en toute simplicité

Pour désactiver le repli de la barre de navigation, nous devons remplacer les styles par défaut. appliqué par Bootstrap. Voici les propriétés CSS essentielles à ajuster :

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

Répartition des remplacements

1. .navbar-collapse.collapse { display: block!important; } : Ce remplacement garantit que le contenu de la barre de navigation reste affiché même lorsque la classe .collapse est appliquée.
2. .navbar-nav>li, .navbar-nav { float: left !important; } : Pour que le menu de droite s'aligne sur celui de gauche, nous devons faire flotter les éléments de gauche.
3. .navbar-nav.navbar-right:last-child { margin-right : -15px !important; } : Cette propriété est facultative et s'applique uniquement à certaines tailles d'écran. Vous pouvez l'omettre si cela n'a pas d'impact sur la disposition de votre barre de navigation.
4. .navbar-right { float: right!important; } : Cela garantit que le menu de droite s'aligne à droite, tandis que ses éléments internes suivent la propriété flottante à gauche.

Conclusion

En appliquant Ces remplacements CSS, vous pouvez désactiver efficacement l'effondrement de la barre de navigation dans Bootstrap 3. Cela vous permet de conserver une barre de navigation statique quel que soit l'appareil ou la taille de l'écran, offrant ainsi une expérience utilisateur personnalisée pour votre candidature.

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!