La clase bootstrap float-right no funcionó con mis botones.
Este es mi fragmento de código html:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg float-right" disabled="disabled">Reset</button> <button type="button" id="convert_button" class="btn btn-primary btn-lg float-right" disabled="disabled">Submit</button> </div> Quiero hacer que los botones se alineen a la derecha, pero cuando agrego la clase float-right en ambos botones, no funciona.
¿Puede alguien decirme qué está mal con mi código y cómo puedo solucionarlo?
En lugar de flotar, probablemente haya mejores opciones de Bootstrap.
Intente eliminar el float-right y, en su lugar, use d-flex con justify-content-end en la línea superior de su código de esta manera...
<div class="container-fluid d-flex justify-content-end"> <button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg" disabled="disabled">Reset</button> <button type="button" id="convert_button" class="btn btn-primary btn-lg" disabled="disabled">Submit</button> </div>El código está funcionando para mí. Acabo de copiar tu fragmento y los botones están en el lado derecho.
El problema es menor en los DIR principales con CSS diferente o algo más está reescribiendo su estilo.
También puede ver esto, cuando ejecuta su fragmento aquí.
Como se indicó en las respuestas anteriores, tal vez haya otros estilos en un div o elemento principal que no sean compatibles con las clases float .
Intente agregar en un div principal la clase clearfix Bootstrap, eso debería resolver el problema en su código.