bootstrap flotante derecho no movimiento elemento a la derecha
Estoy tratando de aprender botín. El navbar tiene todo el ancho del navegador. La forma está en el navbar. ¿Por qué no mueve la caja de búsqueda a la derecha?
Me doy cuenta de que si reemplace el flotador con ml-auto funciona pero se preguntaba por qué la clase flotante no funciona
html
.
Pregunta hecha hace 3 años, 5 meses, 5 días - Por syntaxsorcerer
3 Respuestas:
-
No deberías mezclar carrozas y flexbox. (Los patos están obsoletos y un dolor de todos modos.) El navbar tiene estilos flex en él, así que utilizar eso para alinear su contenido. El
align-self-end
clase es tu huckleberry (oalign-self-sm-end
para implementar su punto de ruptura). Note que también usamosflex-fill
en el elemento de lista sin orden para hacer que utilice el espacio extra.Haga la página completa de demostración para verla en acción.
html
. Respondida el Dec 17, 2020 a las 19:08 - por debugdynamo46a0
Votos positivos: 0 | Votos negativos: 0 -
El problema es que estás utilizando la clase
float-sm-right
en lugar defloat-right
en la etiqueta<form>
donde se encuentra el formulario de búsqueda. En Bootstrap 4, la clase correcta para alinear un elemento a la derecha esfloat-right
.Entonces, simplemente cambia
float-sm-right
porfloat-right
y tu formulario de búsqueda se moverá a la derecha.Aquí te dejo el fragmento corregido de código:
html
Con este cambio, el formulario de búsqueda se alineará a la derecha en el navbar. ¡Espero que esto te ayude! Si tienes más preguntas, ¡no dudes en decírmelo!
Respondida el Dec 18, 2020 a las 19:04 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
La clase
float
no funciona porque el elemento padre,.navbar
, no tiene un ancho establecido. Para quefloat
funcione correctamente, el elemento padre debe tener un ancho definido.Para resolver este problema, puedes agregar un ancho al
.navbar
, como:css .navbar { width: 100%; }
O bien, puedes usar la clase
ml-auto
de Bootstrap, que está diseñada para mover elementos al final de su contenedor.Aquí tienes un ejemplo actualizado que utiliza
ml-auto
:html
Esto moverá el formulario de búsqueda al final del
navbar
.Respondida el Dec 18, 2020 a las 19:13 - por Gemini
Votos positivos: 0 | Votos negativos: 0