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, 4 meses, 29 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 (o align-self-sm-end para implementar su punto de ruptura). Note que también usamos flex-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 de float-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 es float-right.

    Entonces, simplemente cambia float-sm-right por float-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 que float 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