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

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?

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}

En twitter bootstrap 3 prueba la clase pull-right

class="btn pull-right"

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>

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.

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; }

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>

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

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>

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>

Tire a la derecha se depreció a partir de v3.1.0. Solo un aviso.

http://getbootstrap.com/components/#callout-dropdown-pull-right

Aplicar pull-rightclase para el botón. http://getbootstrap.com/css/#helper-classes-floats -> Clases de ayuda

Este enlace te ayudará

Ahora necesita agregar .dropdown-menu-right al elemento existente .dropdown-menu. pull-right ya no es compatible. Más información aquí http://getbootstrap.com/components/#btn-dropdowns

¿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!

<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;
}

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

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.

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>