Barra de navegación Bootstrap 4 con 2 filas
He creado una barra de navegación con Bootstrap 4 alpha 6 que tiene una gran marca / icono a la izquierda, y 2 navbar-nav con enlaces a la derecha del ícono. Un navegador tiene enlaces, y el otro navegador tiene icons. Está funcionando exactamente como quiero, excepto por una cosa.
Me gustaría que las 2 barras de navegación aparezcan en 2 filas separadas a la derecha del icono. Me gusta esto:
------------------------------------------------------ link link link link brand-icon ------------------------------------------- icon icon icon ------------------------------------------------------ La versión móvil seguirá mostrando los enlaces verticalmente como lo hace ahora. He intentado varias cosas diferentes con flexbox, pero no puedo hacer que funcione.
Aquí está mi código:
- Centre el contenido dentro de una columna en Bootstrap 4
- Centre un elemento en Bootstrap 4 Navbar
- Cómo ampliar / modificar (personalizar) Bootstrap 4 con SASS
- ¿Cuál es la diferencia entre col-lg- *, col-md- * y col-sm- * en Bootstrap?
- ¿Cómo hago que las columnas de la tarjeta se ordenen horizontalmente?
Puede usar la clase de utilidad flexbox de flexbox para astackr los 2 navs verticalmente al lado del icono. Esto establece flex-direction: column en el navbar-collapse para que sus elementos secundarios se navbar-collapse verticalmente.
Demo – Barra de navegación Bootstrap 4 con 2 filas
Aquí hay otra variación con las 2 filas y el formulario de búsqueda de alineación a la derecha : 
Demostración: barra de navegación con 2 filas a la derecha
Actualización para Bootstrap 4.0.0 :
https://www.codeply.com/go/05hEHoiUvv
Aquí hay un escenario alternativo con 2 barras de navegación con un toggler móvil
Bootstrap 4.0 – Dos NavBars que se colapsan en una sola palanca
¿Cómo puedo tener Brand y Navbar en líneas separadas?
La “variación con la alineación de 2 filas a la derecha” no alineó a la derecha las filas en Safari para mí. Puse las listas desordenadas en un nuevo div con las clases flex-column y ml-auto .
- Bootstrap 4: ¿Cómo hacer que la fila se estire la altura restante?
- Bootstrap – Cómo eliminar el canal entre columnas
- Añadir espacio entre columnas astackdas verticalmente en Bootstrap 4
- Bootstrap 4: ¿migración de glifos?
- Filas y columnas de Bootstrap: ¿necesito usar la fila?
- Bootstrap 4 Center alineación vertical y horizontal
- ¿Cómo construir un diseño de 2 columnas (Fixed – Fluid) con Twitter Bootstrap?
- Alineación vertical en Bootstrap 4
- Bootstrap carrusel múltiples marcos a la vez
- Bootstrap 4.0 Grid System Layout no funciona
- Bootstrap 4 alinea los artículos de la barra de navegación a la derecha