Comment positionner les éléments de la barre de navigation Bootstrap 4 en dehors de la section Réduire ?

Bootstrap 4 : Positionner les éléments de la barre de navigation en dehors de la section Réduire

Naviguer dans la barre de navigation de Bootstrap 4 peut être délicat, surtout lorsqu'il s'agit de maintenir certains éléments à l'extérieur de la section pliable. De nombreux développeurs ont du mal à garantir que des éléments spécifiques restent persistants quel que soit l'état d'effondrement.

Pour résoudre ce problème, l'approche la plus simple consiste à utiliser les classes utilitaires flexbox. Cela élimine le besoin de CSS supplémentaire et conserve proprement les éléments souhaités en dehors du div navbar-collapse.

Vous trouverez ci-dessous une version améliorée de l'extrait de code fourni :

<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 cette version améliorée , vous pouvez clairement observer les changements suivants :

1. Les éléments que vous souhaitez conserver en dehors du repli sont situés en dehors du div navbar-collapse.
2. Nous avons appliqué le d-flex flex -row classes vers le conteneur où résident les éléments persistants. Cela garantit que ces éléments restent dans une ligne horizontale.
3. Les classes order-* sont utilisées. Il s'agit de classes utilitaires de commande réactives qui déterminent la position d'un élément dans le conteneur flexible lorsqu'il se trouve dans différents points d'arrêt d'écran.
4. La classe order-2 order-lg-3 a été appliquée au conteneur contenant les éléments persistants. Cela garantit que ces éléments restent le deuxième dans l'ordre lors des fenêtres d'affichage mobiles et le troisième dans l'ordre sur les écrans plus grands.
5. La classe order-3 order-lg-2 a été appliquée au div navbar-collapse, garantissant que les éléments pliables sont prioritaires sur mobile et deviennent deuxièmes sur les écrans plus grands.

L'utilisation de ces classes garantit efficacement que les éléments en dehors de la réduction restent visibles tandis que la section pliable est prioritaire lorsque le point d'arrêt est atteint.

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!