Comment empêcher la barre de navigation Bootstrap 3 de s'effondrer ?

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

Introduction

Le menu de la barre de navigation de Bootstrap 3 fournit un moyen pratique de réduire et de développer les éléments de menu sur des écrans plus petits. Cependant, dans certains cas, vous souhaiterez peut-être désactiver ce comportement de réduction et conserver le menu visible à tout moment. Cet article propose une solution à ce problème.

Solution

Pour éviter que la barre de navigation ne s'effondre, vous pouvez remplacer les styles par défaut de Bootstrap. Voici les propriétés CSS que vous devez mettre à jour :

Explication

• .navbar-collapse.collapse : Cette propriété remplace l'état masqué par défaut des éléments du menu de droite sur les écrans plus petits, garantissant qu'ils restent visible.
• .navbar-nav>li, .navbar-nav : Ces propriétés garantissent que les éléments de menu de gauche et de droite flottent vers la gauche, leur permettant d'apparaître sur le même ligne.
• .navbar-nav.navbar-right:last-child: Cette propriété corrige un problème de marge qui peut survenir dans certains résolutions.
• .navbar-right :Cette propriété maintient le menu de droite aligné à droite de l'écran.

Exemple

L'intégration de ces modifications CSS dans votre projet désactivera l'effondrement de la barre de navigation behavior :

En implémentant ces modifications CSS, vous pouvez facilement empêcher l'effondrement de la barre de navigation dans Bootstrap 3, en gardant votre menu visible dans toutes les résolutions d'écran.

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!