CSS float-right no funciona en Bootstrap 4 Navbar

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

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 .row principal para mover los elementos flexibles hacia los bordes más alejados de la fila.

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

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. El .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 usar las clases de utilidad de margen automático , como ml-auto que es un atajo para CSS margin-left:auto . Esto se puede utilizar para empujar la nav hacia la derecha https://stackoverflow.com/questions/45494882/css-float-right-not-working-in-bootstrap-4-navbar/

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

  

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

  

Solo tenga en cuenta que, en este caso, justify-content-between obras porque solo hay 2 componentes de la barra de navegación (marca de barra de navegación y navegación).

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

Acabo de añadir esto:

  

Y un extra