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

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

...

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

cómo se ve bien con el mismo número de registros

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

cómo se ve mal

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

como me imagino que debería verse

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

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

diseño aceptable

¡Gracias por el consejo!


ACTUALIZAR

Acabo de descubrir aleatoriamente una posibilidad para lograr la primera variante deseada: solo defines un div por columna y colocas todos los elementos (en este caso tablas) dentro, para que no confíen el uno en el otro.

Algo como eso:

 

Esto se debe a la altura variable de la columna. Necesitará un reinicio de “clearfix” cada 3 columnas para forzar incluso la envoltura. Una forma es utilizar el enfoque recomendado por Bootstrap , o en este caso específico puede usar un simple clearfix de CSS como este.

 @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 diferente ancho de columna y niveles de grillas, hay una solución universal de clearfix solo CSS 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 usa la cuadrícula Bootstrap: http://www.bootply.com/mYkzRDvbEq

Ver mi respuesta más completa sobre este tema

Puede resolver esto de varias maneras, dependiendo de lo que quiera usar y del soporte necesario del navegador.


Grid: El camino de Rambo
Si está seguro de que sus tablas no tendrán más de cinco registros, podría tratar de darles a todos un ancho mínimo adecuado. Sin duda, no es la más elegante de todas.


Grid: la forma FlexBox
Como puede ver en caniuse , el soporte de navegador de FlexBox hoy en día no es malo. 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 con los niños, o elementos de la grilla, puedes hacer que todos se estiren para rellenar ese feo espacio en blanco, logrando así otro diseño de cuadrícula sin ser … ¿poco elegante?


Grid: el modo Javascript
Otra forma de lograr un diseño de cuadrícula en este caso es usar JavaScript para hacerlo de modo que todos tengan la misma altura que el elemento más alto en 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. Ya tienes que usar jQuery por Bootstrap de todos modos.


Albañilería: el camino de Javascript
El sistema sin cuadrícula que especificó con diferentes dimensiones se denomina Diseño de mampostería . También hay una biblioteca ú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 tu marcado esté bastante sucio, y no sé si le va bien con Bootstrap.


Albañilería: la manera Boostrap
No estoy seguro porque no lo he intentado, pero podrías intentar organizar el contenido de esta manera:

 

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

Todas las columnas en un contenedor> fila?

 
...

Podrías usar

 

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

 
...