Bootstrap 4: elementos persistentes de la barra de navegación fuera del contenedor colapsado

Navegar por un sitio web puede ser frustrante cuando enlaces importantes, como íconos de redes sociales, desaparecen cuando la barra de navegación se contrae en tamaños más pequeños pantallas. Afortunadamente, Bootstrap 4 ofrece una solución elegante para mantener visibles ciertos elementos de la barra de navegación incluso cuando el menú está contraído.

Problema

El problema surge cuando la barra de navegación está configurada para contraerse cuando el ancho de la pantalla se vuelve estrecho . Este comportamiento está controlado por la clase .collapse. De forma predeterminada, todos los elementos dentro del contenedor .collapse están ocultos cuando se activa el colapso.

Solución

Para evitar que ciertos elementos de la barra de navegación desaparezcan con el colapso, simplemente muévalos fuera del contenedor .collapse . Esto se puede lograr usando las clases de utilidad order-* para ajustar el orden flexbox de los elementos. -expandir-lg plantilla-barra de navegación"> barra de navegación

En este ejemplo, los íconos de redes sociales se colocan dentro de un contenedor fuera del elemento .collapse. Las clases d-flex y order-* garantizan que los íconos permanezcan en el orden y posición correctos cuando la barra de navegación está colapsada.