Elementos de la barra de navegación Bootstrap 4 en el lado derecho

Acabo de cambiar a bootstrap 4 y volver a trabajar todo mi html y scss para trabajar con él y no puedo encontrar cómo poner un grupo de elementos de navegación en el lado derecho de la barra de navegación. Este es mi código de barra de navegación:

 

Y esta es la captura de pantalla de lo que parece

enter image description here

TL; DR:

Cree otra

para los elementos de la barra de navegación que desee a la derecha.
ml-auto tirará de su navbar-nav hacia la derecha, donde mr-auto lo arrastrará hacia la izquierda.

Probado contra Bootstrap v4.1.3

              

En la versión 4, es más fácil. Simplemente coloque una clase ml-auto en el ul así:

  

Esto debería funcionar para alpha 6. La clave es la clase “mr-auto” en el navegador izquierdo, que empujará el navegador derecho hacia la derecha. También necesita agregar navbar-toggleable-md o se astackrá en una columna en lugar de una fila. Tenga en cuenta que no agregué los elementos de alternar restantes (por ejemplo, el botón para alternar), agregué solo lo suficiente para que se formatee según lo solicitado. Aquí hay ejemplos más completos https://v4-alpha.getbootstrap.com/examples/navbars/ .

         

En la versión Bootstrap 4 alpha-6, como navbar usa el modelo flex, puede usar justify-content-end en parent’s div y eliminar mr-auto .

  

Esto funciona como un encanto 🙂

Navbar expandido

Navbar colapsó

Tengo un codepen en funcionamiento con enlaces de navegación alineados a la izquierda y a la derecha que se colapsan en un menú receptivo juntos utilizando .justify-content-between en la etiqueta padre: https://codepen.io/epan/pen/bREVVW?editors= 1000

  

Con Bootstrap v4.0.0-alpha.6: dos

    s ( .navbar-na ), uno con .mr-auto y otro con .ml-auto :

      

    En mi caso, estaba buscando una solución que permitiera alinear correctamente uno de los artículos de la barra de navegación. Para hacer esto, debe agregar style="width:100%;" a la

    y luego agrega la clase ml-auto a tu elemento de la barra de navegación.

    Aquí y fácil ejemplo.