¿Cómo puedo hacer que mis botones Bootstrap de Twitter se alineen a la derecha?

Resuelto deltanovember asked hace 11 años • 21 respuestas

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

deltanovember avatar Mar 16 '13 13:03 deltanovember
Aceptado

Insértelo pull-righten 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-rightcomando fue eliminado y reemplazado con float-righto 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.

aronadaal avatar May 02 '2013 19:05 aronadaal

En Twitter Bootstrap 3 prueba la clase pull-right

class="btn pull-right"
Shawn Vader avatar Jan 25 '2014 12:01 Shawn Vader

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>
César León avatar Jun 04 '2015 14:06 César León