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:
Scervino Lawn Service 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. 🙁
- Bootstrap 4.0: encabezado receptivo con imagen + barra de navegación + cuerpo de altura completa
- ¿Cómo hacer que una pequeña página use Bootstrap 4 responsive?
- Bootstrap 4 carrusel no funciona?
- Marca Navbar y menú desplegable móvil en la misma línea de arranque 4
- discrepancia de flexión y contracción entre Firefox y Chrome
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; }
Scervino Lawn Service
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
Scervino Lawn Service
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/…
Scervino Lawn Service
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
- El menú desplegable de la barra de navegación no funciona con Angular y Bootstrap 4
- Cómo centrar el logotipo de la barra de navegación en Boostrap 4 con los enlaces de navegación a continuación
- Bootstrap 4 Carousel: intervalo de datos individual en cada diapositiva
- Cómo hacer que el ancho del menú desplegable sea igual al ancho de su padre en bootstrap 4
- El colapso de la barra de navegación Bootstrap 4 no funciona
- Espacios entre grillas / columnas en bootstrap4
- Cómo mover el elemento ‘nav’ debajo de ‘navbar-brand’ en mi Navbar
- Bootstrap 4 colapsando dos barras de navegación en un botón de alternar
- Bootstrap 4 – Pie de página adhesivo – Altura dinámica del pie de página
- HTML-Bootstrap posicionamiento dynamic y dynamic DIV y alineación
- Bootstrap 4 – Alinear los elementos de la barra de navegación