¿Cómo puedo hacer que mis botones de Bootstrap de Twitter se alineen correctamente?


452

Tengo una demostración simple aquí:

http://jsfiddle.net/HdeZ3/1/

<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. He intentado usar pull-right pero esto arruina completamente la alineación. ¿Qué estoy haciendo mal?


55
¿Por qué esta pregunta está etiquetada con twitter-bootstrap-3 y twitter-bootstrap-2 , así como twitter-bootstrap ?
Andrew Grimm

55
Porque es relevante para todas las versiones desde 3/2013
Zim

Respuestas:


693

Inserte 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 de ayuda> .pull-right.

Para Bootstrap 3 , consulte: https://getbootstrap.com/docs/3.3/css/#helper-classes > Clases de ayuda.


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}


18
No entiendo esta respuesta. En la pregunta, el código de ejemplo ya está usando pull-right.
Guival

@guival Me preguntaba lo mismo. stackoverflow.com/a/26546770/470749 implica que usar en buttonlugar de inputhará una diferencia.
Ryan

@ Ryan, esto funciona en mí, tanto en la entrada como en el botón
Lesther

@aronadaal Es trabajo para mí, ¡gracias!
Houari Zegai

249

En twitter bootstrap 3 prueba la clase pull-right

class="btn pull-right"

44
Ya no, quedó en desuso a partir de v 3.1: getbootstrap.com/components/#dropdowns-alignment
2015

99
+1 para resaltar el cambio. Pero esa depreciación es solo para el menú desplegable que ha sido reemplazado por .dropdown-menu-right. No ha quedado en desuso en su conjunto.
Shawn Vader

tienes razón, dice la documentaciónwe've deprecated .pull-right on dropdown menus
2015

3
Tuve que usar pull-right en el btn-group div externo: <div class = "btn-group pull-right">
Gerfried

17
pull-rightusos float: right, colapsando así los contenidos verticales uno encima del otro. Envuelva el botón con text-rightDIV así:<div class="text-right">button...</div>
hashbrown

137

La clase "pull-right" puede no ser la correcta porque en los usos "float: right" en lugar de text-align.

Comprobando 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:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>


66
Creo que esto es mejor que tirar hacia la derecha porque evita que el contenido vertical se colapse uno encima del otro y evita tener que agregar más marcas solo para solucionarlo.
Tony Wall

2
Gracias. El problema con "pull-right" es que elimina los márgenes de los botones. Esto mantiene los márgenes pero mueve los elementos a la derecha. ¡Perfecto!
PR Whitehead

¿Por qué text-right debe estar en div contactando este botón en lugar de solo class="btn btn-default text-right"en el botón?
Krystian Polska

50

Actualización 2019 - Bootstrap 4.0.0

La pull-rightclase ahora está float-righten Bootstrap 4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

También es mejor no alinear la lista ul y usar elementos de bloque para las filas.

¿ float-rightSigue sin funcionar?

Recuerde que Bootstrap 4 ahora es flexbox , y hay muchos elementos display:flexque pueden evitar que funcione el derecho flotante. En algunos casos, a las clases de utilidades les gusta align-self-endo ml-autofuncionan para alinear a la derecha los elementos que están dentro de un contenedor de flexbox como Bootstrap 4 .row, Card o Nav.

También recuerde que text-righttodavía funciona en elementos en línea.

Bootstrap 4 alinea ejemplos correctos


Bootstrap 3

Usa la pull-rightclase.


Están trabajando para mí, pero no debería necesitar depender de los enlaces. Lea la respuesta para obtener una explicación sobre cómo alinear correctamente.
Zim

19

Use buttontag en lugar de inputy use pull-rightclass.

pull-right La clase arruina totalmente sus dos botones, pero puede solucionar esto definiendo el margen personalizado en el lado derecho.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

Luego use el siguiente CSS para la clase

.RbtnMargin { margin-left: 5px; }

18

Además de la respuesta aceptada, cuando trabajo dentro de contenedores y columnas que han incorporado el relleno de bootstrap, a veces tengo una columna estirada completa con un div secundario que hace que tirar sea el camino a seguir.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

Alternativamente, haga que todas sus columnas se sumen a su número total de columnas de cuadrícula (12 por defecto) junto con tener la primera columna compensada.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

12

Perdón por responder a una pregunta anterior ya contestada, pero pensé en señalar un par de razones por las que su jsfiddle no funciona, en caso de que otros lo revisen y se pregunten por qué la clase pull-right como se describe en la respuesta aceptada no funciona. No trabaje allí.

  1. la url del archivo bootstrap.css no es válida. (tal vez funcionó cuando hizo la pregunta).
  2. debe agregar el atributo: type = "button" a su elemento de entrada, o no se representará como un botón, se representará como un cuadro de entrada. Mejor aún, use el <button>elemento en su lugar.
  3. Además, debido a que pull-right usa flotadores, obtendrá un cierto escalonamiento del diseño del botón porque cada LI no tiene suficiente altura para acomodar la altura del botón. Agregar algo de css de altura de línea o altura mínima al LI abordaría eso.

violín de trabajo: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(También agregué un ancho mínimo a los botones ya que no podía soportar el aspecto de un aspecto irregular justificado a la derecha de los botones debido a los anchos variables :))


11

Usar el pull-rightayudante Bootstrap no funcionó para nosotros porque lo usa float: right, lo que obliga a los inline-blockelementos a convertirseblock . Y cuando los .btns se vuelven block, pierden el margen natural que inline-blockles proporcionaba como elementos cuasi textuales.

Entonces, en su lugar, utilizamos direction: rtl;el elemento principal, lo que hace que el texto dentro de ese elemento se distribuya de derecha a izquierda, y que también hace que los inline-blockelementos se distribuyan de derecha a izquierda. Puede usar LESS como el siguiente para evitar que los niños sean acostados rtltambién:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

y úsalo como:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

7

En Bootstrap 4 : intente de esta manera con Flexbox. Ver documentación en getbootstrap

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>




2

¿Puedes probar un CSS personalizado aparte del CSS de arranque para ver si hay algún cambio? Tratar

.move-rigth{
    display: block;
    float: right;
}

Si funciona, puede intentar manipular lo que tiene o agregar otro formato a esto y lograr lo que desea. Porque estás usando bootstrap no significa que si no te ofrece lo que quieres, entonces solo lo administras. Está trabajando con sus códigos y le ordena que haga lo que dice. ¡Salud!


55
sin necesidad de CSS personalizado, ya que la respuesta otros espectáculos todo lo necesario está incluido en el arranque
chrisweb

@chrisweb ¿Qué sucede si tiene otros complementos que comparten la misma clase CSS desconocida para usted y problemas conflictivos, qué hace? ¿Sentarse y mirar que crear un CSS personalizado y seguir adelante? El OP nunca especificó si se agregaron otros complementos que pudieran compartir las mismas clases de CSS.
OmniPotens

2
<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

Acabo de utilizar el diseño ... aplicar estilos para li ...

o

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

en CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

Para mí, esto coloca ambos elementos de la lista en una sola línea
deltanovember,

2

también puedes usar columnas en blanco para dar espacios a la izquierda

me gusta

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

Demo :: Jsfiddle demo


1

Desde Bootstrap V3.3.1, el siguiente estilo CSS resolverá este problema

.modal-open{
    padding-right: 0 !important;
}

Nota: Intenté todas las sugerencias en las publicaciones anteriores y todas las direcciones de versiones anteriores y no proporciono una solución para las versiones de arranque más nuevas.


-1

para documentación de bootstrap 4

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>

¿Qué tiene esto que ver con alinear a la derecha y los botones?
Zim
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.