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

boton flotante jquery

Question

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 desordena completamente la alineación. ¿Qué estoy haciendo mal?

Answer 1

¿Puedes probar un CSS personalizado a un lado del bootstrap CSS para ver si hay cambios? Tratar

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

Si funciona, puedes intentar manipular lo que tienes o agregar otro formato a esto y lograr lo que deseas. Debido a que está utilizando bootstrap no significa que si no le ofrece lo que desea, simplemente lo administre. Usted está trabajando con sus códigos y por lo tanto le ordena que haga lo que usted dice. ¡Aclamaciones!

Answer 2

Agregando a la respuesta aceptada, cuando trabajo dentro de contenedores y columnas que se han incorporado en el relleno de bootstrap, a veces tengo una columna completamente estirada con un div niño que hace el esfuerzo de ser 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>

Como alternativa, haga que todas sus columnas se sumen al número total de columnas de la cuadrícula (12 de forma predeterminada) junto con la primera columna que se va a desplazar.

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

Answer 3

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

Answer 4

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

Este enlace ayudará

Answer 5

Disculpe 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 de pull-right descrita en la respuesta aceptada no lo hace. No trabajes allí.

1. La URL del archivo bootstrap.css no es válida. (Tal vez funcionó cuando hiciste la pregunta).
2. debe agregar el atributo: tipo = "botón" 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 elemento <button> lugar.
3. Además, como pull-right usa flotadores, obtendrá un escalonamiento en la disposición de los botones porque cada LI no tiene la altura suficiente para adaptarse a la altura del botón. Agregar algo de altura de línea o css de altura mínima a la LI lo solucionaría.

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

Answer 6

El uso de la herramienta auxiliar Bootstrap pull-right no funcionó para nosotros porque utiliza float: right , que obliga a inline-block elementos de inline-block a convertirse en block . Y cuando los .btn convierten en block , pierden el margen natural que inline-block les proporcionaba como elementos casi textuales.

Así que en su lugar usamos direction: rtl; en el elemento padre, que hace que el texto dentro de ese elemento se distribuya de derecha a izquierda, y que hace que los elementos de inline-block en línea también se distribuyan de derecha a izquierda. Puede usar MENOS de la siguiente manera para evitar que los niños se rtl también:

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

  * {
    direction: ltr;
  }
}

y utilízalo como:

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

Answer 7

En Bootstrap 4 : Prueba 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>

Answer 8

En twitter bootstrap 3 prueba la clase pull-right

class="btn pull-right"

Answer 9

Inserte 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 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 comando pull-right se eliminó y se reemplazó con float-right o en general para float-{sm,md,lg,xl}-{left,right,none}

Answer 10

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

Al revisar el archivo bootstrap 3 css, 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>

Answer 11

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

Answer 12

Tire a la derecha se depreció a partir de v3.1.0. Sólo un heads up.

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

Answer 13

Use la etiqueta del button lugar de la input y use la clase pull-right .

pull-right clase pull-right desordena totalmente ambos botones, pero puede solucionar esto definiendo un 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 usa el siguiente CSS para la clase

.RbtnMargin { margin-left: 5px; }

Answer 14

para la documentation 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>

Answer 15

Actualización 2018 - Bootstrap 4.0.0

La clase pull-right ahora es float-right en 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.

¿Todavía no funciona el float-right ?

Recuerde que Bootstrap 4 ahora es flexbox , y se display:flex muchos elementos display:flex que puede evitar que flote a la derecha el trabajo. En algunos casos, las clases de utilidad como align-self-end o ml-auto trabajan para alinear a la derecha los elementos que se encuentran dentro de un contenedor de flexbox como Bootstrap 4 .row, Card o Nav.

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

Bootstrap 4 alinea ejemplos de la derecha

Bootstrap 3

Usa la clase pull-right .

Answer 16

<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 usar layout..apply 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;
}