Estoy maquetando unos botones con bootstrap 3, alineados a la derecha, siempre me ha llamado la atención que para que aparezcan así:
------------- -------------
| botón 1 | | botón 2 |
------------- -------------
Hay que poner primero el código del "botón 2" y luego del "botón 1", de la siguiente forma:
<div class="row">
<a class="btn btn-primary pull-right">botón 2</a>
<a class="btn btn-primary pull-right" style="margin-right: 1rem">botón 1</a>
</div>
Es decir que al usar pull-right
se invierte su "orden natural", ¿por qué ocurre esto?
Código de prueba:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pruebas alineación con Bootstrap 3</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.content,
.row {
border : 1px solid grey;
margin : 5%;
padding: 5%;
}
</style>
</head>
<body>
<div class="content">
<h1>Pruebas alineación con Bootstrap 3</h1>
<div class="row">
<p>Botones alineados a la derecha</p>
<a class="btn btn-primary pull-right">botón 2</a>
<a class="btn btn-primary pull-right" style="margin-right: 1rem">botón 1</a>
</div>
<div class="row">
<p>Botones alineados a la Izquierda</p>
<a class="btn btn-primary pull-left" style="margin-right: 1rem">botón 1</a>
<a class="btn btn-primary pull-left">botón 2</a>
</div>
</div>
</body>
</html>
float: right
. Esta propiedad hace que el elemento sea "empujado" en dirección hasta el elemento flotante más cercano, rompiendo su flujo normal. Puede consultar información aquí. – Jheyman Mejia el 19 jun. 19 a las 17:50pull-right
, es en realidad el propio y se debe únicamente a la propiedadfloat:right
. Para probar esto basta con sustituir la clasepull-right
por otra personalizada que solo aplique esta propiedad al elemento y se observará que se produce exactamente el mismo resultado. – Orici el 19 jun. 19 a las 21:23direction: rtl
, sólo que aplicado a elementos completos y no a textos. – Jheyman Mejia el 19 jun. 19 a las 21:29