twitter-bootstrap - mas - sistema de rejillas bootstrap 4

Filas claras al hacer columnas de respuesta múltiple-Bootstrap (11)

Agregando a @Jonas y la respuesta de @KFunk:

Posible solución para requerir el uso de todos los tamaños de col (col-xs-6 col-sm-4 col-md-4 col-lg-4).

Clases creadas: auto-clear-xs, auto-clear-sm, auto-clear-md y auto-clear-lg.

He hecho mi respuesta móvil primero.

Nota : Esto todavía requiere que las columnas tengan el mismo tamaño.

HTML

<div class="row auto-clear-xs auto-clear-lg"> <div class="col-xs-6 col-lg-3"> <p>Hey</p> </div> </div>

SCSS

@mixin row-first-child($col-type, $clear-type) { .col-#{$col-type}- { &1:nth-child(12n+1), &2:nth-child(6n+1), &3:nth-child(4n+1), &4:nth-child(3n+1), &6:nth-child(odd){ clear: $clear-type; } } } .auto-clear-xs{ @media (min-width: $screen-xs-min){ @include row-first-child(xs, both); } @media (max-width: $screen-xs-min){ @include row-first-child(xs, both); } } .auto-clear-sm{ @media (min-width: $screen-sm){ @include row-first-child(xs, none); @include row-first-child(sm, both); } } .auto-clear-md{ @media (min-width: $screen-md){ @include row-first-child(xs, none); @include row-first-child(sm, none); @include row-first-child(md, both); } } .auto-clear-lg{ @media (min-width: $screen-lg){ @include row-first-child(xs, none); @include row-first-child(sm, none); @include row-first-child(md, none); @include row-first-child(lg, both); } }

CSS

@media (min-width: 480px) { .auto-clear-xs .col-xs-1:nth-child(12n+1), .auto-clear-xs .col-xs-2:nth-child(6n+1), .auto-clear-xs .col-xs-3:nth-child(4n+1), .auto-clear-xs .col-xs-4:nth-child(3n+1), .auto-clear-xs .col-xs-6:nth-child(odd) { clear: both; } } @media (max-width: 480px) { .auto-clear-xs .col-xs-1:nth-child(12n+1), .auto-clear-xs .col-xs-2:nth-child(6n+1), .auto-clear-xs .col-xs-3:nth-child(4n+1), .auto-clear-xs .col-xs-4:nth-child(3n+1), .auto-clear-xs .col-xs-6:nth-child(odd) { clear: both; } } @media (min-width: 768px) { .auto-clear-sm .col-xs-1:nth-child(12n+1), .auto-clear-sm .col-xs-2:nth-child(6n+1), .auto-clear-sm .col-xs-3:nth-child(4n+1), .auto-clear-sm .col-xs-4:nth-child(3n+1), .auto-clear-sm .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-sm .col-sm-1:nth-child(12n+1), .auto-clear-sm .col-sm-2:nth-child(6n+1), .auto-clear-sm .col-sm-3:nth-child(4n+1), .auto-clear-sm .col-sm-4:nth-child(3n+1), .auto-clear-sm .col-sm-6:nth-child(odd) { clear: both; } } @media (min-width: 992px) { .auto-clear-md .col-xs-1:nth-child(12n+1), .auto-clear-md .col-xs-2:nth-child(6n+1), .auto-clear-md .col-xs-3:nth-child(4n+1), .auto-clear-md .col-xs-4:nth-child(3n+1), .auto-clear-md .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-md .col-sm-1:nth-child(12n+1), .auto-clear-md .col-sm-2:nth-child(6n+1), .auto-clear-md .col-sm-3:nth-child(4n+1), .auto-clear-md .col-sm-4:nth-child(3n+1), .auto-clear-md .col-sm-6:nth-child(odd) { clear: none; } .auto-clear-md .col-md-1:nth-child(12n+1), .auto-clear-md .col-md-2:nth-child(6n+1), .auto-clear-md .col-md-3:nth-child(4n+1), .auto-clear-md .col-md-4:nth-child(3n+1), .auto-clear-md .col-md-6:nth-child(odd) { clear: both; } } @media (min-width: 1200px) { .auto-clear-lg .col-xs-1:nth-child(12n+1), .auto-clear-lg .col-xs-2:nth-child(6n+1), .auto-clear-lg .col-xs-3:nth-child(4n+1), .auto-clear-lg .col-xs-4:nth-child(3n+1), .auto-clear-lg .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-sm-1:nth-child(12n+1), .auto-clear-lg .col-sm-2:nth-child(6n+1), .auto-clear-lg .col-sm-3:nth-child(4n+1), .auto-clear-lg .col-sm-4:nth-child(3n+1), .auto-clear-lg .col-sm-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-md-1:nth-child(12n+1), .auto-clear-lg .col-md-2:nth-child(6n+1), .auto-clear-lg .col-md-3:nth-child(4n+1), .auto-clear-lg .col-md-4:nth-child(3n+1), .auto-clear-lg .col-md-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-lg-1:nth-child(12n+1), .auto-clear-lg .col-lg-2:nth-child(6n+1), .auto-clear-lg .col-lg-3:nth-child(4n+1), .auto-clear-lg .col-lg-4:nth-child(3n+1), .auto-clear-lg .col-lg-6:nth-child(odd) { clear: both; } }

Ese título podría no ser muy preciso, pero aquí está la situación:

Como puede ver en el HTML, el sistema de cuadrícula va de ~~4 imágenes en pantallas xl a~~ 3 en pantallas lg a 2 en cualquier otra cosa.

Estoy intentando que se muestre correctamente, es decir, la cantidad adecuada de imágenes en cada tamaño de pantalla. Sin embargo, algo funky está sucediendo y no puede resolverlo usando clases bootstraps.

Me parece que tendré que agregar filas dinámicamente en cada punto de quiebre.

¿Alguna sugerencia?

- ACTUALIZACIÓN - Me acabo de dar cuenta de que col-xl- * no existe. Sin embargo, eso no cambia la situación en absoluto. Por favor, ignore la declaración xl.

- ACTUALIZACIÓN 2 - Imágenes actualizadas.

- ACTUALIZACIÓN 3 - Trataré de aclarar mi objetivo. Para esa imagen específica adjunta en mi publicación, me gustaría que aparezcan 3 cuadros por fila, no todos los skelter de helter.

Cuando se reduce a 2 cuadros por fila (dispositivo xs), quiero asegurarme de que cada fila tenga 2 cuadros.

Así es como se supone que es. La cuadrícula de Bootstrap consta de 12 columnas, le está diciendo que clasifique un ítem lg para que sea 4/12, que es un tercero y un ítem xs para ser 6/12, que es la mitad del ancho disponible.

Si comprueba el estilo aplicado, verá que col-xs-6 es lo mismo que establecer el ancho de un elemento al 50% y 33.33% para col-lg-4.

Puede leer más sobre el sistema de grillas here

EDITAR: Creo que entiendo su problema ahora, sin ver su código, probablemente no pueda darle una solución exacta. Sin embargo, el problema parece ser la altura variable de sus cajas, si las tiene todas a la misma altura, debería darle la cantidad correcta de cajas por línea.

Bootstrap 4 introduce clases hidden-*-up y hidden-*-down . Utilidad muy útil (y elegante) para situaciones como estas.

Clases disponibles
Las .hidden-*-up ocultan el elemento cuando la ventana gráfica está en el punto de corte dado o más ancho. Por ejemplo, .hidden-md-up oculta un elemento en las ventanas de visualización medianas, grandes y extra grandes.
Las .hidden-*-down ocultan el elemento cuando la ventana gráfica está en el punto de corte dado o es más pequeño. Por ejemplo, .hidden-md-down oculta un elemento en ventanas gráficas pequeñas, pequeñas y medianas.
No hay clases de utilidad receptivas explícitas "visibles" / "mostrar"; usted hace que un elemento sea visible simplemente sin ocultarlo en ese tamaño de punto de corte.
Puede combinar una .hidden-*-up con una clase .hidden-*-down para mostrar un elemento solo en un intervalo determinado de tamaños de pantalla. Por ejemplo, .hidden-sm-down.hidden-xl-up muestra el elemento solo en ventanas medianas y grandes. Usar múltiples .hidden-*-up o múltiples .hidden-*-down es redundante e inútil.
Estas clases no intentan acomodarse a casos menos comunes en los que la visibilidad de un elemento no puede expresarse como un único rango contiguo de tamaños de punto de interrupción de ventana; en su lugar, deberá usar CSS personalizado en tales casos.

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

En caso de que su número de cajas en una fila sea DINÁMICO y diferente para la resolución, como en mi caso, en función de sus col- , haga el operador del módulo. Tomemos el ejemplo del siguiente ejemplo.

<div class="row"> <?php $elementCounter = 0; ?> <?php foreach ( $this->programs as $program ): ?> <div class="col-xs-6 col-sm-3"> DATA </div> <?php $elementCounter++; ?> <?php if( $elementCounter % 4 == 0 ): ?> <div class="clearfix hidden-xs"></div> <?php elseif( $elementCounter % 2 == 0 ): ?> <div class="clearfix visible-xs"></div> <?php endif; ?> <?php endforeach; ?> </div>

col-xs-6 significa que tiene 2 cajas seguidas para dispositivos extra pequeños. así que para ello he agregado esa $elementCounter % 2 == 0 , por lo que es cierto para cada segundo elemento (DESPUÉS). y se agregó clearfix con visible-xs por lo que no debería afectar el escritorio u otras resoluciones.

col-sm-3 significa 4 cajas en fila para dispositivos pequeños y superiores, así que en ese caso he agregado $elementCounter % 4 == 0 y con ese hidden-xs para que clearfix esté oculto para dispositivos xs y sea visible para pequeños y por encima. De esta forma puede modificarlo en consecuencia.

Estaba buscando una solución y dado que mi HTML se procesa a través de un CMS, no pude usar la solución de la respuesta aceptada.

Entonces mi solución es:

.teaser { // break into new line after last element > div:last-child { clear: right; } } .teaser { // two colums @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { > div:nth-child(2n+1) { clear: left; } } } .teaser { // three colums @media (min-width: @screen-md-min) { > div:nth-child(3n+1) { clear: left; } } }

Espero que esto ayude a alguien :-)

Extiende tu bootstrap.css con este CSS:

@media (min-width:1200px){ .auto-clear .col-lg-1:nth-child(12n+1){clear:left;} .auto-clear .col-lg-2:nth-child(6n+1){clear:left;} .auto-clear .col-lg-3:nth-child(4n+1){clear:left;} .auto-clear .col-lg-4:nth-child(3n+1){clear:left;} .auto-clear .col-lg-6:nth-child(odd){clear:left;} } @media (min-width:992px) and (max-width:1199px){ .auto-clear .col-md-1:nth-child(12n+1){clear:left;} .auto-clear .col-md-2:nth-child(6n+1){clear:left;} .auto-clear .col-md-3:nth-child(4n+1){clear:left;} .auto-clear .col-md-4:nth-child(3n+1){clear:left;} .auto-clear .col-md-6:nth-child(odd){clear:left;} } @media (min-width:768px) and (max-width:991px){ .auto-clear .col-sm-1:nth-child(12n+1){clear:left;} .auto-clear .col-sm-2:nth-child(6n+1){clear:left;} .auto-clear .col-sm-3:nth-child(4n+1){clear:left;} .auto-clear .col-sm-4:nth-child(3n+1){clear:left;} .auto-clear .col-sm-6:nth-child(odd){clear:left;} } @media (max-width:767px){ .auto-clear .col-xs-1:nth-child(12n+1){clear:left;} .auto-clear .col-xs-2:nth-child(6n+1){clear:left;} .auto-clear .col-xs-3:nth-child(4n+1){clear:left;} .auto-clear .col-xs-4:nth-child(3n+1){clear:left;} .auto-clear .col-xs-6:nth-child(odd){clear:left;} }

Úselo como:

<div class="row auto-clear"> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3"> <p>Hey</p> </div> </div>

Nota: esto requiere el uso de todos los tamaños de col y que todas las columnas sean del mismo tamaño.

La razón por la que su diseño se está rompiendo se debe a la altura dinámica de las imágenes que se presentan. La solución es simple, solo restringe la altura de las imágenes. Por ejemplo

HTML

<div class="container"> <div class="row"> <div id="uploaded"> <div class="col-xs-6 col-lg-4"> <div class="file-block"> <div class="file-thumbnail"> <img src="http://placehold.it/200x500" alt=""> </div> <div class="file-row-footer"> <a href="javascript:void(0)"> Delete</a> </div> </div> </div> <div class="col-xs-6 col-lg-4"> <div class="file-block"> <div class="file-thumbnail"> <img src="http://placehold.it/200x500" alt=""> </div> <div class="file-row-footer"> <a href="javascript:void(0)"> Delete</a> </div> </div> </div> </div> </div> </div>

CSS

.file-block { border: 1px solid #ccc; border-radius: 10px; margin: 20px 0px; text-align: center; } .file-thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; height: 180px; font: 0/0 a; /* remove the gap between inline(-block) elements */ } .file-thumbnail:before { content: '' ''; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } .file-thumbnail img { display: inline-block; margin: 0 auto; max-width: 150px; max-height: 180px; vertical-align: middle; }

Mira el CodePen para verlo en acción. Espero que esto ayude.

Parece que la única solución a su problema es establecer una altura mínima o una altura fija para sus elementos para que no haya inconsistencias que causen sus problemas.

Agrega esto:

.file-row-contain { min-height:250px; }

... establece la altura de acuerdo a tus necesidades

Puede solucionar esto muy fácilmente con css si no necesita soportar IE8.

.file-row-contain.col-lg-4:nth-child(3n+1), .file-row-contain.col-xs-6:nth-child(2n+1) { clear: left; }

Ver examples

Una solución .scss que usa variables bootstrap, tomada de @jonas y @yog

@mixin row-first-child($col-type) { .col-#{$col-type}- { &1:nth-child(12n+1), &2:nth-child(6n+1), &3:nth-child(4n+1), &4:nth-child(3n+1), &6:nth-child(odd){ clear: left; } } } .auto-clear { @media (min-width: $screen-lg-min){ @include row-first-child(lg); } @media (min-width: $screen-md-min) and (max-width: $screen-md-max){ @include row-first-child(md); } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){ @include row-first-child(sm); } @media (max-width: $screen-xs-max){ @include row-first-child(xs); } }

clearfix este problema agregando elementos de clearfix donde deberían estar. Quería 3 columnas en md y 2 columnas en sm y así es como lo hice:

<div class="row"> <div class="col-sm-6 col-md-4"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-md"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-md"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> </div>

Así que utilicé clearfix visible-sm después de cada segundo div y clearfix visible-md después de cada tercer div. No creo que esta solución sea ideal, pero funciona bastante bien.

EDITAR: A partir de Bootstrap v3.2.0, las clases .visible-* están en desuso.

http://getbootstrap.com/css/#responsive-utilities :

Las clases .visible-xs, .visible-sm, .visible-md y .visible-lg también existen, pero están en desuso a partir de v3.2.0. Son aproximadamente equivalentes al bloque .visible - * -, excepto con casos especiales adicionales para alternar elementos relacionados.

EDIT 2: Esta solución funciona siempre y cuando no desee editar CSS, si tiene la opción de hacerlo, le recomiendo que use la respuesta de Jonas, ya que es mucho más simple en mi opinión.