Estoy tratando de crear una fila con 2 cols. Una col de la izquierda con su contenido alineado a la izquierda, y el segundo de col con su contenido alineado a la derecha (antiguo tire a la derecha).

¿Cómo ir sobre esto en alfa-6?

Yo he probado un par de cosas, pero esto es lo que tengo hasta ahora. Lo que me estoy perdiendo?

<div class="row">
    <div class="col">left</div>
    <div class="col ml-auto">content needs to be right aligned</div>
</div>

OriginalEl autor Thibs | 2017-02-24

3 Comentarios

  1. 76

    Uso float-right para los elementos de bloque, o text-right para los elementos en línea:

    <div class="row">
         <div class="col">left</div>
         <div class="col text-right">inline content needs to be right aligned</div>
    </div>
    <div class="row">
          <div class="col">left</div>
          <div class="col">
              <div class="float-right">element needs to be right aligned</div>
          </div>
    </div>

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

    Si float-right no está funcionando, recordar que Bootstrap 4 es ahora flexbox, y muchos de sus elementos display:flex que puede prevenir float-right de trabajo.

    En algunos casos, la utilidad de las clases como align-self-end o ml-auto de trabajo a la derecha de alinear los elementos que están dentro de un flexbox contenedor como el Bootstrap 4 .fila, Tarjeta o Nav. El ml-auto (margin-left:auto) se utiliza en un flexbox elemento de inserción de los elementos a la derecha.

    Bootstrap 4 alinear a la derecha ejemplos

    OriginalEl autor Zim

  2. 2

    De la documentación, tales como:

    <div class="row">
        <div class="col-md-6">left</div>
        <div class="col-md-push-6">content needs to be right aligned</div>
    </div>

    Docs

    el bootstrap 4 etiquetas fueron añadidas por alguien más (después de que me había contestado). La pregunta original sólo tenía twitter-bootstrap etiqueta.

    OriginalEl autor Jordan.J.D

  3. 1

    ¿Qué hay de esto? Bootstrap 4

    <div class="row justify-content-end">
        <div class="col-3">
            The content is positioned as if there was
            "col-9" classed div appending this one.
        </div>
    </div>

    OriginalEl autor Bexultan Myrzatayev

Dejar respuesta

Please enter your comment!
Please enter your name here