Bootstrap 4: Mostrar elementos de Navbar fuera del contenedor colapsado

cuando se usa Bootstrap, un desafío común muestra ciertos elementos de Navbar persistentemente fuera del contenedor colapsado. Por defecto, todos los elementos de Navbar están ocultos cuando la barra de Navbar se derrumba en pantallas más pequeñas. Explore una solución simple a este problema.

La forma más sencilla de mantener visibles los elementos de Navbar independientemente del estado del colapso es utilizando las clases de utilidad FlexBox proporcionadas por Bootstrap. Este enfoque evita la necesidad de CSS adicional.

Solución de código

en el siguiente código, los elementos que deben mantenerse visibles durante el estado colapsado se mantienen fuera del Div .Navbar-Collapse Div:

las clases .d-FLEX .FLEX-ROW Izquierda cuando aumenta el tamaño de la pantalla (Order-LG-3).
the .order-3 .order-LG-2 La clase coloca el botón de colapso y los elementos del menú a la izquierda en pantallas más pequeñas (orden-3) y a la derecha cuando el tamaño de la pantalla aumenta (Order-LG-2).
• usando las clases de FlexBox, podemos controlar el colocador de la colocación de los fletos. Los elementos permanecen visibles incluso cuando la barra de Nav se colapsan.