Comment empêcher l'effondrement de la barre de navigation dans Bootstrap 3 ?

Prévenir l'effondrement de la barre de navigation dans Bootstrap 3

Dans Bootstrap 3, la barre de navigation peut s'effondrer sur des écrans plus petits pour économiser de l'espace. Cela peut être utile dans de nombreux cas, mais si vous souhaitez désactiver ce comportement et garder votre barre de navigation visible à tout moment, voici comment procéder.

Personnalisation du CSS

Pour Pour éviter l'effondrement de la barre de navigation, vous devez remplacer quelques propriétés CSS par défaut. Voici un aperçu des modifications nécessaires :

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

• .navbar-collapse.collapse remplace la propriété display par défaut, qui masque les éléments réduits. Au lieu de cela, il définit l'affichage sur bloquer, les rendant visibles.
• .navbar-nav>li, .navbar-nav force les éléments du menu de gauche à flotter left.
• .navbar-nav.navbar-right:last-child donne à l'élément de menu le plus à droite quelques ajustements de marge subtils.
• .navbar-right garantit que le menu de droite flotte vers le à droite.

Implémentation

Pour implémenter ces modifications, ajoutez le CSS fourni à votre feuille de style. Alternativement, vous pouvez intégrer les styles directement dans votre code HTML.

Explication

Ces propriétés CSS fonctionnent ensemble pour garder les éléments de la barre de navigation visibles sur toutes les tailles d'écran.

• La propriété .navbar-collapse.collapse remplace le repli fonctionnalité.
• .navbar-nav>li, .navbar-nav et .navbar-right garantissent que le menu de droite s'aligne correctement avec celui de gauche. menu.

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!