css - La nueva línea de Bootstrap Grid System no se ve bien

twitter-bootstrap twitter-bootstrap-3

Question

Recientemente, comencé a hacer una página de administración en mi sitio para editar varias tablas pequeñas (1-5 entradas). Todos se muestran en una página, y las tablas se anidan en un div de la siguiente manera:

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
    </div>
    ...
</div>

Hice esto con seis tablas, y así es como se ve si tienen la misma cantidad de registros (una tabla es un bloque negro):

Cuando ahora la primera tabla tiene un registro más, la primera tabla es más grande y, por lo tanto, el último div se ajusta a una tercera fila:

Lo que realmente quiero lograr (si es posible con el sistema de cuadrícula boostrap) es que la sexta tabla no se ajusta a una tercera línea, sino que se coloca un poco más abajo, así:

¿Es posible de alguna manera usar o no usar boostrap?

Esta variante también sería aceptable, pero no usando una tabla sino un diseño receptivo ( EDITAR : Esto se logró usando la respuesta de @Skelly):

¡Gracias por el consejo!

ACTUALIZAR

Descubrí al azar una posibilidad para lograr la primera variante deseada: solo define un div por columna y coloca todos los elementos (en este caso tablas) dentro, para que no se confíen entre sí.

Algo como eso:

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
        <!--table 4-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
        <!--table 5-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
        <!--table 6-->
    </div>
</div>

Answer 1

Esto se debe a la altura variable de la columna. Necesita un reinicio "clearfix" cada 3 columnas para forzar un ajuste uniforme. Una forma es usar el enfoque recomendado por Bootstrap , o en este caso específico, puede usar una solución de CSS simple como esta ...

@media (min-width:992px) {
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}

Demostración: http://codeply.com/go/mONLiFj30T

Para otros escenarios de "clearfix" con diferentes niveles de ancho de columna y cuadrícula, existe una solución universal de clearfix de CSS único que se ajustará a más escenarios (sin soporte).

Otra solución serían las columnas CSS, para un diseño de estilo de "mampostería", pero no utiliza la cuadrícula Bootstrap: http://www.bootply.com/mYkzRDvbEq

Vea mi respuesta más completa sobre este tema

Answer 2

Podrías usar

<div class="clearfix visible-xs-block"></div>

Para los diversos tamaños en ciertas posiciones, manteniéndolo flexible para diferentes diseños.

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
    </div>
    <div class="clearfix visible-sm-block visible-md-block"></div>
    ...
</div>

Answer 3

Puede resolver esto de varias maneras, según lo que desee usar y la compatibilidad con el navegador que necesita.

Rejilla: el camino Rambo
Si está seguro de que sus tablas no tendrán más de cinco registros, puede intentar darles a todos un ancho mínimo apropiado. Sin embargo, seguramente no es la más elegante de las cosas. Rejilla: la forma FlexBox
Como puede ver en caniuse , la compatibilidad con el navegador de FlexBox hoy en día seguramente no es mala. Al configurar esto en el elemento contenedor

.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

y luego haciendo lo mismo en los elementos secundarios de la cuadrícula, puede hacer que todos se estiren para llenar ese espacio en blanco feo, logrando así otro diseño de cuadrícula sin ser ... ¿poco elegante?

Cuadrícula: la forma Javascript
Otra forma de lograr un diseño de cuadrícula en este caso es obviamente usar JavaScript para que todos tengan la misma altura que el elemento más alto de la cuadrícula. La forma más rápida sería usar un complemento jQuery , que también le permite darles el mismo tamaño por fila solo si es necesario, lo que parece adecuado en su caso. De todos modos, ya debe usar jQuery debido a Bootstrap. Albañilería: la forma Javascript
El sistema sin cuadrícula que especificó con diferentes dimensiones se denomina Diseño de mampostería . También hay una library útil para eso, aunque no creo que valga la pena si solo necesitas usar ese diseño solo en esa área. También hace que su marcado sea bastante sucio, y no sé si le va bien con Bootstrap. Albañilería: el camino boostrap
No estoy seguro, ya que no lo he probado, pero podría intentar organizar el contenido de esta manera:

<div class="row">
  <div class="col-sm-4">
    <!-- table 1 -->
    <!-- table 2 -->
  </div>
  <div class="col-sm-4">
    <!-- table 3 -->
    <!-- table 4 -->
  </div>
  <div class="col-sm-4">
    <!-- table 5 -->
    <!-- table 6 -->
  </div>
</div>

Es posible que no sea una solución óptima en caso de que sus tablas también necesiten estar en un orden preciso.

Answer 4

Todas las columnas en un contenedor> fila?

<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
    <!--table 1-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
    <!--table 2-->
</div>
...
<div class="col-xs-12 col-sm-4 col-md-4">
    <!--table 6-->
</div
</div>