¿Cómo puedo hacer que mis botones Bootstrap de Twitter se alineen a la derecha?
Tengo una demostración simple aquí:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
Tengo una lista desordenada y para cada elemento de la lista deseo tener texto a la izquierda y luego un botón alineado a la derecha. Intenté usar tirar hacia la derecha pero esto arruina completamente la alineación. ¿Qué estoy haciendo mal?
Mostrar fragmento de código
Insértelo pull-right
en el atributo de clase y deje que bootstrap organice los botones.
Para Bootstrap 2.3 , consulte: http://getbootstrap.com/2.3.2/components.html#misc > Clases auxiliares > .pull-right.
Para Bootstrap 3 , consulte: https://getbootstrap.com/docs/3.3/css/#helper-classes > Clases auxiliares.
Para Bootstrap 4 , consulte: https://getbootstrap.com/docs/4.0/utilities/float/#responsive
El pull-right
comando fue eliminado y reemplazado con float-right
o en general parafloat-{sm,md,lg,xl}-{left,right,none}
Para Boostrap 5 , consulte: https://getbootstrap.com/docs/5.0/utilities/float/
La solución más cercana sería float-end
.
En Twitter Bootstrap 3 prueba la clase pull-right
class="btn pull-right"
La clase "pull-right" puede no ser la forma correcta porque usa "float: right" en lugar de text-align.
Al revisar el archivo css bootstrap 3, encontré la clase "text-right" en la línea 457. Esta clase debería ser la forma correcta de alinear el texto a la derecha.
Algún código: para Bootstrap 3 y 4
<div class="row">
<div class="col-xs-12">
<div class="text-right">
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
Para arranque 5
<div class="row">
<div class="col">
<div class="text-end">
<button type="button" class="btn btn-secondary">Default</button>
</div>
</div>
</div>