Estoy trabajando con Twitter Bootstrap v3 y desea reordenar los elementos rápida, utilizando columna de pedidos y la compensación de.

Esta es la forma en que me gustaría usar mis elementos. En -xs o -sm puntos de interrupción, con el div contenedor apilados 4 en una fila:

La reordenación de divs con alternación con Twitter Bootstrap?

A -md o -lg puntos de interrupción, con el div contenedor apilados 2 a una fila:

La reordenación de divs con alternación con Twitter Bootstrap?

Este es el código actual – sé cómo configurar las clases en el div contenedor, pero no en a, B y C:

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

Que no puedo averiguar cómo llegar a, B y C en el orden correcto con Bootstrap 3 columna de pedidos y la compensación de. Es realmente posible?

Esto es lo más lejos que yo tengo uso de JSFiddle: http://jsfiddle.net/3vYgR/

  • ¿Qué entiende usted por «apilados 4/2 a una fila»? ¿Quiere usted decir que la primera versión es de 4 unidades de altura y la segunda es de 2 unidades de altura? O ¿quiere usted decir que la primera versión se pueden tener 4 de los a-b-c de los grupos en una línea horizontal, y el segundo puede tener 2?
InformationsquelleAutor Richard | 2013-08-29

4 Comentarios

  1. 23

    Creo que usted desee ver en la push y pull clases…

    <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
    </div>

    Demo: http://bootply.com/77853

    • Eso es exactamente lo que yo quería, gracias! Cualquiera que esté leyendo aquí está el enlace a la push/pull docs: getbootstrap.com/css/#grid-column-ordering aunque yo todavía no la entendemos exactamente lo empuje y tire de hacer…
    • También, gracias por la introducción a la bootply.com – muy útil.
    • Sólo se necesita nueva cuadrícula de clase cuando algo cambia, como va de 12 columnas de a 6. No hay necesidad de col-sm-* o col-lg-* clases porque ellos heredarán la xs y md respectivamente.
    • No olvide que usted también podría necesitar el uso de «clearfix» si tu los elementos que aparecen en situaciones inesperadas.
    • En este ejemplo también se da un problema con la alineación vertical de [C] como aparece en mi respuesta.
  2. 1

    Ninguna razón para no utilizar métodos más tradicionales en este, es decir,. flotante B a la izquierda y los otros elementos, a la derecha?

    Como si se agregó a la corriente de CSS en su jsfiddle:

    .b {
        float: left;
        width: 50%;
        height: 100px;
    }
    .a, .c {
        float: right;
        width: 50%;   
        height: 50px;
    }

    Ver http://jsfiddle.net/E6BFk/

    No estoy seguro de que Bootstrap de la columna de pedidos podría lograr el efecto de acumulación, tal vez sólo el re-ordenar… Aunque la documentación es bastante delgada en esa característica.

  3. 0

    He probado el push/pull, como se muestra en la respuesta por Skelly pero C termina en una nueva fila una vez alturas se aplican: http://www.bootply.com/Q3djHYawgb#

    Si B puede ser mostrado en primer lugar cuando se muestra en un tamaño pequeño, entonces creo que tiene más sentido para crear una fila dentro del lado derecho de la columna de a que contienen a y C:

    <div class="containing row">
        <div class="b col-xs-12 col-md-6">Content of B</div>
        <div class="ac col-xs-12 col-md-6">
            <div class="row">
                <div class="a col-xs-12">Content of A</div>
            </div>
            <div class="row">
                <div class="c col-xs-12">Content of C</div>
            </div>
        </div>
    </div>

    Ver http://jsfiddle.net/hoodoo99/L2BE9/

    • Su ejemplo pone Un bajo B cuando XS patadas en.
  4. 0

    La respuesta proporcionada por @skelly es un gran punto de partida, pero no causar algunos problemas de alineación vertical. Imaginar Un es un de altura div, luego C está alineado verticalmente por debajo de A.:

    [A] [B]
    [ ]
        [C]

    También, Si usted quiere tomar un paso más allá, puede que también necesite considerar el uso de clearfix bloques. Por ejemplo;

    <!-- Add clearfix for only the required viewport(s) -->
    <div class="clearfix visible-md-block visible-lg-block"></div>

    Sin clearfix md o lg podría terminar como:

    [A] [B]
        [C] [D]

    Esto es particularmente importante si usted quiere más de 2 elementos en el final de «la columna», o las alturas de los elementos empezar a tirar de otros elementos fuera de la alineación.

    Con el clearfix md o lg sería:

    [A] [B]
        [C]
        [D]

    Ejemplo violín: http://jsfiddle.net/L5174o8d/

    • Es allí cualquier manera de resolver el vertical align problema? lo que quiero es lo contrario de esto, pero tengo la misma alinear problema. por ejemplo: jsfiddle.net/bqop535n
    • Si he entendido correctamente, entonces usted debe quitar el clearfix y empuja/tira, por ejemplo: jsfiddle.net/qkaL02z8
    • jsfiddle.net/qkaL02z8/1 agregar float conseguir lo que necesito.

Dejar respuesta

Please enter your comment!
Please enter your name here