css - rejillas - Bootstrap 4: columnas de celdas de celdas de la plataforma que responden según la ventana gráfica?

rejillas bootstrap 4

Question

Así que en Bootstrap v4, veo que hay una nueva característica para los mazos de cartas ( http://v4-alpha.getbootstrap.com/components/card/#decks ) que hace un grupo de cartas, con su altura igual según el contenido más alto en el grupo.

Parece que el número de columnas se basa en la cantidad de tarjetas div que hay en el grupo. ¿Hay alguna forma de cambiar el número de columnas en función de la ventana gráfica? Por ejemplo, ¿4 columnas / ancho de la tarjeta en ancho grande, 2 ancho en ancho medio y 1 en ancho pequeño?

Actualmente mantienen el mismo número de columnas / tarjetas de ancho hasta menos de 544px. A 544px y superior, tienen display: table-cell con la regla de screen (min-width: 544px) .

¿Hay alguna manera de hacer que las tarjetas tengan diferentes números de columnas basadas en la ventana gráfica cambiando solo el CSS?

Editar - Buscando no usar flex / flexbox debido al soporte de IE

Ejemplo de Codepen de 4 col / tarjeta de ancho y 3 col / tarjeta de ancho en http://codepen.io/jpost-vlocity/full/PNEKKy/

Answer 1

Aquí tienes, http://codepen.io/KarlDoyle/pen/pypWbR

Lo principal es que debes anular los estilos. Como se muestra abajo.

.card-deck {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap; 
  align-items: stretch;
}
.card-deck .card {
  display: block;
  flex-basis: 33.3%; /* change this value for each breakpoint*/
}

Answer 2

Es difícil establecer el ancho de las tarjetas (receptivo) con card-deck porque usa display:table-cell y width:1% .

Descubrí que es más fácil hacer que respondan utilizando las tarjetas dentro de la cuadrícula de Bootstap col- col-* y luego puede usar los puntos de corte de la ventana de cuadrícula. Habilita el FlexBox de Bootstrap si quieres que las cartas tengan la misma altura que el card-deck .

http://www.codeply.com/go/6eqGPn3Qud

Además, img-responsive ha cambiado a img-fluid

Actualizar Bootstrap 4 Alpha 6

Flexbox ahora es el predeterminado , pero todavía no hay una forma compatible de hacer tarjetas sensibles. La forma recomendada es usar tarjetas dentro de la grilla:

Tarjetas receptivas que utilizan grid

Otra forma de hacer un mazo de cartas sensible es usar divisiones de reinicio sensibles cada x columnas. Esto obligará a las cartas a envolver puntos de interrupción específicos.

Por ejemplo: 5 en xl, 4 en lg, 3 en md, 2 en sm, etc.

Demostración de la tarjeta sensible a la tarjeta
Variación de pseudo elementos CSS

Answer 3

Esto se puede hacer con javascript.

• Primero necesita crear divisiones para cada punto de interrupción en su documento html.

• Luego necesita asignar a los div un valor predeterminado en css. Cree consultas de medios para cada punto de interrupción que anule ese valor predeterminado

• Luego escribe un poco de javascript. Una función para probar los puntos de interrupción al verificar si el valor predeterminado de css asignado ha sido anulado, y otra para agregar y eliminar las clases apropiadas. Eliminé las clases de card-deck cuando quería que fueran receptivas, y agregué las clases col-**-** apropiadas. Finalmente, agregue llamadas a estas funciones en las áreas document.ready y window.resize .

var breakpoint;

$(document).on(''ready'', function() {
 detectBreakpoint();
});

$(window).resize(function() {
 detectBreakpoint();
});

// detects the current breakpoint
function detectBreakpoint() {
 if ($(''.breakpointXS'').css(''display'') == "inline") {
  breakpoint = ''xs'';
 } else if ($(''.breakpointSM'').css(''display'') == "inline") {
  breakpoint = ''sm'';
 } else if ($(''.breakpointMD'').css(''display'') == "inline") {
  breakpoint = ''md'';
 } else if ($(''.breakpointLG'').css(''display'') == "inline") {
  breakpoint = ''lg'';
 }
 placeCards();
}

function placeCards() {
 if (breakpoint == ''xs'' || breakpoint == ''sm'') {
  console.log(''small'');
  $(''.cardCont1'').removeClass(''card-deck-wrapper'');
  $(''.cardCont2'').removeClass(''card-deck'');
  $(''.card'').addClass(''col-xs-10 offset-xs-1'');
 } else {
  $(''.cardCont1'').addClass(''card-deck-wrapper'');
  $(''.cardCont2'').addClass(''card-deck'');
  $(''.card'').removeClass(''col-xs-10 offset-xs-1''); 
 }
}

.breakpointXS, .breakpointSM, .breakpointMD, .breakpointLG {
 /* hides divs to detect breakpoints until made visible my media queries */
 display: none;
}

@media only screen and (max-width: 767px) {
 .breakpointXS {
  display: inline;
 }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
 .breakpointSM {
  display: inline;
 }
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
 .breakpointMD {
  display: inline;
 }
}

@media only screen and (min-width: 1200px) {
 .breakpointLG {
  display: inline;
 }
}

<!-- to use breakpoints in jquery -->
  <div class="breakpointXS"></div>
  <div class="breakpointSM"></div>
  <div class="breakpointMD"></div>
  <div class="breakpointLG"></div>