Comment puis-je empêcher l'effondrement de la barre de navigation Bootstrap 3 ?

Désactivation de l'effondrement de la barre de navigation dans Bootstrap 3

Le composant de barre de navigation de Bootstrap fournit un système de navigation pratique et réactif. Par défaut, la barre de navigation se réduit sur des tailles d'écran plus petites pour améliorer l'accessibilité mobile. Cependant, dans certains cas, vous souhaiterez peut-être désactiver ce comportement de réduction pour garantir que votre barre de navigation reste visible à tout moment.

Une approche pour y parvenir consiste à remplacer les styles CSS par défaut responsables de la réduction de la barre de navigation. Voici les propriétés spécifiques qui doivent être traitées :

.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;
}

En remplaçant ces propriétés, vous pouvez empêcher la barre de navigation de s'effondrer sur des écrans plus petits.

Explication :

• .navbar-collapse.collapse : Cette propriété cible l'état réduit de la barre de navigation et définit son affichage sur bloquer pour la garder visible.
• .navbar-nav>li, . navbar-nav : ces propriétés garantissent que les éléments de menu de gauche et de droite (y compris le bouton bascule) sont toujours affichés en ligne.
• .navbar-nav.navbar-right:last-child : cette propriété corrige un problème d'espacement mineur avec le dernier élément du menu de droite sur les écrans de la taille d'une tablette.
• .navbar-right : Cette propriété positionne correctement le menu de droite sur les écrans plus petits en réglant son flotteur à droite.

En implémentant ces remplacements CSS, vous pouvez désactiver avec succès le comportement de réduction de la barre de navigation dans Bootstrap 3. Cette technique vous permet de conserver une barre de navigation visible dans toutes les tailles de fenêtre sans avoir besoin de règles CSS complexes ou excessives.

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!