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

La navigation sur un site Web peut être frustrante lorsque des liens importants, tels que les icônes de réseaux sociaux, disparaissent lorsque la barre de navigation se réduit 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 la réduction est activée.

Solution

Pour empêcher certains éléments de la barre de navigation de disparaître avec la réduction, 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. -expand-lg modèle de barre de navigation"> Barre de navigation

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.