Comment garder les éléments de la barre de navigation Bootstrap 4 visibles en dehors du conteneur réduit ?

Bootstrap 4 : Affichage des éléments de la barre de navigation en dehors du conteneur réduit

Lors de l'utilisation de Bootstrap, un défi courant consiste à afficher de manière persistante certains éléments de la barre de navigation en dehors du conteneur réduit. Par défaut, tous les éléments de la barre de navigation sont masqués lorsque la barre de navigation se réduit sur des écrans plus petits. Explorons une solution simple à ce problème.

Le moyen le plus simple de garder les éléments de la barre de navigation visibles quel que soit l'état de réduction consiste à utiliser les classes utilitaires flexbox fournies par Bootstrap. Cette approche évite le besoin de CSS supplémentaire.

Solution de code

Dans le code suivant, les éléments qui doivent rester visibles pendant l'état réduit sont conservés en dehors du div .navbar-collapse :

<code class="html"><nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="d-flex flex-row order-2 order-lg-3">
        <ul class="navbar-nav flex-row">
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav></code>

Explication

Dans le code ci-dessus :

• Les classes .d-flex .flex-row garantissent que les éléments de la barre de navigation sont affichés horizontalement dans une rangée .
• La classe .order-2 .order-lg-3 place les éléments à l'extrême droite dans des écrans plus petits (order-2) et les déplace vers la gauche lorsque la taille de l'écran augmente (order-lg- 3).
• La classe .order-3 .order-lg-2 place le bouton de réduction et les éléments de menu à gauche dans les écrans plus petits (ordre-3) et à droite lorsque la taille de l'écran augmente (ordre -lg-2).

En utilisant les classes utilitaires flexbox, nous pouvons contrôler avec élégance la disposition de la barre de navigation, garantissant que certains éléments restent visibles même lorsque la barre de navigation est réduite.

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!