Comment puis-je empêcher ma barre de navigation Bootstrap 3 de s'effondrer ?

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

La barre de navigation de Bootstrap offre un moyen pratique de créer des menus pliables qui s'adaptent à différentes tailles d'écran. Cependant, dans certains scénarios, vous souhaiterez peut-être désactiver la fonction de réduction pour garder le menu visible à tout moment.

Solution

Pour empêcher la barre de navigation de s'effondrer, vous peut remplacer un CSS spécifique propriétés :

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

Explication

• La première propriété remplace le comportement .collapse par défaut, forçant le menu à rester visible.
• Les deuxième et troisième propriétés garantissent que les éléments de menu de gauche et de droite flottent vers la gauche, en les alignant sur la même ligne.
• Le La quatrième propriété corrige un problème mineur lié à l'alignement du menu de droite sur les écrans plus petits.

Exemple de code

Considérez le code HTML suivant pour une barre de navigation :

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png" />
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

En appliquant les remplacements CSS mentionnés ci-dessus, cette barre de navigation ne s'effondrera plus, quel que soit l'écran taille.

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!