¿Cómo puedo obtener mi Twitter Bootstrap botones a la derecha de alinear?

Tengo una simple demo 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 de deseo tener el texto a la izquierda y luego a la derecha alinea el botón. He tratado de usar pull-derecha, pero esta totalmente echa a perder la alineación. ¿Qué estoy haciendo mal?

17 Kommentare

  1. 661

    Insertar pull-right en el atributo de clase y vamos a bootstrap organizar los botones.

    Para Bootstrap 2.3, ver: http://getbootstrap.com/2.3.2/components.html#misc > Ayudante de clases > .tire de la derecha.

    Para Bootstrap 3, ver: https://getbootstrap.com/docs/3.3/css/#helper-classes > Ayudante de clases.


    Para Bootstrap 4, ver: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

    La pull-right comando fue removido y reemplazado con float-right o, en general, para float-{sm,md,lg,xl}-{left,right,none}

    • No entiendo esta respuesta. En la pregunta el código de ejemplo ya está utilizando pull-right.
    • funciona para el bootstrap 4 versión beta?
    • Me preguntaba la misma cosa. stackoverflow.com/a/26546770/470749 implica que el uso de button en lugar de input va a hacer una diferencia.
    • Ryan esto funciona en mí, tanto en la entrada y el botón
  2. 248

    En twitter bootstrap 3 probar la clase pull-derecho

    class="btn pull-right"
    • Ya no, que ya no se utiliza como de la v 3.1 : getbootstrap.com/components/#dropdowns-alignment
    • +1 para poner de relieve el cambio. Pero que la depreciación es sólo para ver el menú desplegable que ha sido reemplazado por .dropdown-menu-derecha. Su no ha sido desechada como un todo.
    • tienes razón, la documentación dice we've deprecated .pull-right on dropdown menus
    • Tuve que usar pull-a la derecha en el exterior btn-group div: <div class=»btn-group pull-right»>
    • pull-right utiliza float: right, con lo que el colapso vertical contenido en la parte superior de uno al otro. Envuelva el botón con text-right DIV como este –<div class="text-right">button...</div>
  3. 127

    «pull-right» de la clase no puede ser el camino correcto porque en usa «float: right» en lugar de text-align.

    Comprobar el bootstrap 3 archivo css que he encontrado de texto «derecha» de clase en línea 457. Esta clase debe ser el camino correcto para alinear el texto a la derecha.

    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>

    • Creo que esto es mejor que tire de la derecha, porque impide que la vertical del contenido de colapso en la parte superior de uno al otro y evita tener que añadir más mark-up sólo a la solución.
    • Funcionó mejor que tire de la derecha en mi caso +1.
    • Gracias. El problema con «pull-right» es que elimina cualquier margen de los botones. Esto mantiene los márgenes, sino que se mueve los elementos a la derecha. Perfecto!
    • ¿Por qué texto-derecho debe ser en el div que contiene este botón en lugar de sólo class="btn btn-default text-right" en el botón???
  4. 40

    Actualización De 2018 – Bootstrap 4.0.0

    La pull-right clase 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 que no se alinee las listas ul y el uso de elementos de bloque para las filas.

    Es float-right todavía no funciona?

    Recordar que Bootstrap 4 es ahora flexbox, y muchos de sus elementos display:flex que puede impedir la flotación derecho de trabajo. En algunos casos, la util clases como align-self-end o ml-auto de trabajo a la derecha de alinear los elementos que están dentro de un flexbox recipiente como un Bootstrap 4 .fila, Tarjeta o Nav.

    Recordar también que text-right todavía funciona en los elementos en línea.

    Bootstrap 4 alinear a la derecha ejemplos


    Bootstrap 3

    Utilizar el pull-right clase.

    • ml-auto hizo el truco, gracias!!
    • Los enlaces no funcionan.
    • Se está trabajando para mí, pero usted no debe confiar en los enlaces. Leer la respuesta para una explicación sobre cómo alinear a la derecha.
  5. 19

    Uso button etiqueta en lugar de input y uso pull-right clase.

    pull-right clase, totalmente mete tanto de sus botones, pero se puede solucionar este problema mediante la definición personalizada de margen 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>

    A continuación, utilizar la siguiente regla CSS para la clase

    .RbtnMargin { margin-left: 5px; }
  6. 17

    Añadir a la aceptación de respuesta, cuando se trabaja dentro de los contenedores y las columnas que se han construido en el relleno de bootstrap, a veces tengo la plena estira la columna con un niño div que hace la tira a 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>

    Alternativamente, tiene todas sus columnas suman a su número total de columnas de la cuadrícula (12 por defecto), junto con el hecho de tener la primera columna se offset.

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

    Lo siento por responder a una edad ya respondió a la pregunta, pero he pensado que me gustaría señalar un par de razones por las que su jsfiddle no funciona, en el caso de que otros echa un vistazo y se preguntan por qué el pull-clase de derecho, como se describe en la aceptan no tiene la respuesta a trabajar allí.

    1. la dirección url para el bootstrap.css archivo no es válido. (tal vez funcione cuando se hizo la pregunta).
    2. se debe añadir el atributo: type=»button» a su elemento de entrada, o no se representa como un botón que se muestra como un cuadro de entrada. Mejor aún, utilice el <button> elemento en su lugar.
    3. Además, debido a que tire de la derecha utiliza flotadores, obtendrá algunos escalonamiento de la disposición de los botones, ya que cada LI no tiene altura suficiente para acomodar la altura del botón. La adición de una cierta línea-altura o min-altura de la css a la LI haría dirección.

    de trabajo violín: 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 he añadido un min-width para los botones como yo no podía soportar la mirada de una irregular justificado a la derecha vistazo a los botones, debido a diferentes anchos 🙂 )

  8. 11

    Utilizando el Bootstrap pull-right helper no trabajan para nosotros, porque se utiliza la float: right, que las fuerzas de inline-block elementos para convertirse en bloquear. Y cuando el .btns convertirse en block, pierden el margen natural que inline-block fue proporcionándoles como cuasi-elementos textuales.

    Así que en su lugar se utilizó direction: rtl; en el elemento principal, que hace que el texto dentro de ese elemento para el diseño de derecha a izquierda, y que hace que inline-block elementos para el diseño de derecha a izquierda, también. Usted puede usar MENOS como la siguiente para evitar que los niños sean establecidos rtl demasiado:

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

    y utilizarlo como:

    <div class="btn-container-right">
        <button class="btn">Click Me</button>
    </div>
    • Funciona fantástico con «btn» pull-right». Gracias!
    • ^ esto todavía funciona.
  9. 3

    En Bootstrap 4: Trate de esta manera con Flexbox. Consulte la 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>
  10. 2

    Puede intentar un CSS personalizado a un lado el bootstrap CSS para ver si los cambios. Trate de

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

    Si funciona, entonces usted puede intentar la manipulación de lo que tienes o la adición de otro formato a esto y lograr lo que deseo. Debido a que usted está usando bootstrap no significa que si no te ofrecen lo que quieres, entonces usted acaba de gestión. Ustedes están trabajando con sus códigos y por lo que mando a hacer lo que te dicen.
    Saludos!

    • no hay necesidad de css personalizado, como la otra respuesta muestra todo lo necesario está incluido en el bootstrap
    • ¿Qué pasa si usted tiene algunos otros plugins que comparten la misma clase CSS desconocido temas en conflicto y, ¿qué hacer? Sentarse y ver la de crear un css personalizado y a pasar? El OP no especificado si cualquiera de los otros plugins se añadieron que pueden compartir la misma clases css.
  11. 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 expone a los elementos de la lista en una sola línea
    • acabo de actualizar el código..una vez comprobarlo..
  12. 2

    también puede utilizar columnas en blanco para dar espacios a la izquierda

    como

    <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

  13. 1

    De Bootstrap V3.3.1 los siguientes estilos CSS va a resolver este problema

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

    Nota: he probado todas las sugerencias en los puestos de arriba y todas las direcciones de las versiones anteriores y no proporcionar una solución a newset bootstrap versiones.

  14. -1

    para el bootstrap 4 documentación

      <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 que ver esto con alinear a la derecha y los botones?

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea