Comment garder les éléments de la barre de navigation visibles même lorsque la barre de navigation s'effondre dans Bootstrap 4 ?

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

La navigation sur un site Web peut être frustrant lorsque des liens importants, tels que les icônes de réseaux sociaux, disparaissent lorsque la barre de navigation s'effondre sur des éléments plus petits. écrans. Heureusement, Bootstrap 4 offre une solution élégante pour garder certains éléments de la barre de navigation visibles même lorsque le menu est réduit.

Problème

Le problème survient lorsque la barre de navigation est configurée pour se réduire lorsque la largeur de l'écran devient étroite. . Ce comportement est contrôlé par la classe .collapse. Par défaut, tous les éléments du conteneur .collapse sont masqués lorsque le repli est activé.

Solution

Pour empêcher certains éléments de la barre de navigation de disparaître avec le repli, déplacez-les simplement en dehors du conteneur .collapse . Ceci peut être réalisé en utilisant les classes utilitaires order-* pour ajuster l'ordre flexbox des éléments.

Exemple de code

<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>

Dans cet exemple, les icônes des réseaux sociaux sont placées dans un conteneur en dehors de l'élément .collapse. Les classes d-flex et order-* garantissent que les icônes restent dans le bon ordre et dans la bonne position 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!