CSS float-right no funciona en Bootstrap 4

Intento que mis enlaces de navegación floten a la derecha de mi barra de navegación, pero no puedo hacer que funcionen. He intentado usar la clase “.float-right”, “float-xs-right” y “justify-content-end” bootstrap 4, junto con el uso de “float: right! Important;” en mi archivo CSS, y todavía no funciona.

Aquí está el HTML para la barra de navegación de mi sitio web:

 

Y aquí está el CSS:

 #navbar { box-shadow: 0px 0px 11px #000; padding: 0; } #navbar .navbar-brand { font-size: 1.6em; font-weight: bold; color: #9CCC58; } 

Soy relativamente nuevo en el marco de Bootstrap 4, por lo que es posible que esté cometiendo un error tonto, pero espero que alguien pueda ayudarme. 🙁

Puede usar .justify-content-between en el padre .row para mover los niños flex a los extremos de la fila.

 #navbar { box-shadow: 0px 0px 11px #000; padding: 0; } #navbar .navbar-brand { font-size: 1.6em; font-weight: bold; color: #9CCC58; } 
   

Intenté con Bootstrap 4.0.0 Alpha 6 y funciona, aquí está el ejemplo: https://repl.it/JwMq/0

Acabo de agregar esto:

  

Y un extra

Actualización 2018 – Bootstrap 4.0.0

La respuesta original ya no funciona en Bootstrap 4.0.0, y no es una buena práctica usar .row de Bootstrap en el componente de la barra de navegación. .row solo debe usarse para columnas de cuadrícula.

Ahora que Bootstrap 4 es flexbox, una forma de alinear los componentes de la barra de navegación es utilizar las clases de utilidad de margen automático , como ml-auto que es un acceso directo para CSS margin-left:auto . Esto se puede usar para empujar el nav hacia la derecha https://stackoverflow.com/questions/45494882/css-float-right-not-working-in-bootstrap-4/

https://www.codeply.com/go/ZAGhCX5lpq

  

O los utilitarios de flexbox como justify justify-content-between se pueden usar en el container dentro de la barra de navegación https://stackoverflow.com/questions/45494882/css-float-right-not-working-in-bootstrap-4/

  

Solo tenga en cuenta que en este caso justify-content-between funciona porque solo hay 2 componentes de la barra de navegación (navbar-brand y nav).