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

Bootstrap 4 Éléments de la barre de navigation qui persistent en dehors de l'influence de l'effondrement

Dans Bootstrap 4, conserver les éléments persistants de la barre de navigation en dehors du conteneur réduit peut être un défi . Voici une explication détaillée et un correctif pour ce problème :

Énoncé du problème :

Lorsque la barre de navigation s'effondre, les éléments qui appartiennent à l'extérieur de la section réduite sont masqués, ce qui conduit au message effet indésirable montré dans les images fournies.

Solution :

La solution suivante utilise les classes utilitaires flexbox pour conserver les éléments persistants en dehors de la zone réductible :

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

• Les éléments persistants sont placés dans un
  avec les classes d-flex, flex-row, order-2 et order-lg-3.
• Ce div reste dans le même ordre quel que soit le point d'arrêt, garantissant que les éléments persistants sont toujours visibles.
• Le div Réduire la barre de navigation-collapse reçoit les classes order-3 et order-lg-2.
• Ces classes spécifient que les éléments réductibles doivent apparaître en dernier (ordre-3) dans le fichier réduit/ point d'arrêt mobile et second (ordre 2) dans les autres points d'arrêt.
• Les classes navbar-light et navbar-expand-lg fournissent le style approprié pour la barre de navigation.

Cette solution garantit que les éléments persistants de la barre de navigation restent visibles même lorsque la barre de navigation s'effondre.

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!