Bootstrap 4 colonne di tabella-tabella di tabella di corrispondenza basate su viewport?

Question

Quindi, in Bootstrap v4, vedo che c'è una nuova funzione per i mazzi di carte (http://v4-alpha.getbootstrap.com/components/card/#decks) che crea un gruppo di carte, con la loro altezza uguale in base al contenuto più alto del gruppo.

Sembra che il numero di colonne sia basato sul numero di carte-div presenti nel gruppo. C'è un modo per far cambiare il numero di colonne in base al viewport? Ad esempio, 4 colonne/carta di larghezza larga, 2 larghezza a larghezza media e 1 a larghezza ridotta?

Attualmente rimangono lo stesso numero di colonne/schede fino a meno di 544 pixel. A 544 px e oltre, hanno display: table-cell con la regola screen (min-width: 544px).

C'è un modo per far sì che le carte abbiano numeri diversi di colonne in base al viewport cambiando solo il CSS?

Edit - Guardando a non utilizzare Flex/FlexBox grazie al supporto IE

Codepen esempio di 4 col/carta di larghezza e 3 col/carta di largo alla http://codepen.io/jpost-vlocity/full/PNEKKy/

Answer 1

Qui si va, http://codepen.io/KarlDoyle/pen/pypWbR

L'elemento principale è che è necessario sovrascrivere gli stili. come mostrato di seguito.

.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

Aggiornamento 2018

E 'difficile impostare le carte larghezze (responsive) con card-deck perché utilizza display:table-cell e width:1%.

Ho trovato più facile renderli reattivi utilizzando le schede all'interno della griglia di Bootstap col-* e quindi è possibile utilizzare i punti di interruzione della vista griglia. Abilita la flexbox di Bootstrap se vuoi che le carte siano all'altezza uguale allo card-deck.

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

Inoltre, img-responsive è cambiato per img-fluid

Bootstrap 4.0.0

Flexbox è ora il default, ma non un supportato c'è ancora modo per fare carta reattiva -deck di. Il metodo consigliato è quello di utilizzare schede all'interno della griglia:

Responsive cards using grid

Un altro modo per fare una carta-deck reattivo, sta usando div ripristino responsive ogni x colonne. Questo costringerà le carte ad avvolgere a specifici punti di interruzione.

Ad esempio: 5 su xl, 4 su lg, 3 su md, 2 su sm, ecc.

Responsive card deck demo (4.0.0)
Responsive card deck demo (alpha 6)
CSS pseudo elements variation

Answer 3

questo può essere fatto con javascript.

• In primo luogo è necessario creare div per ogni punto di interruzione nel documento HTML.

• Quindi è necessario assegnare i div un valore predefinito in css. Crea query multimediali per ogni punto di interruzione che sovrascriva quel valore predefinito

• Quindi scrivi un po 'di javascript. Una funzione per verificare i punti di interruzione controllando se il valore css predefinito che è stato assegnato è stato sostituito, e un altro per aggiungere e rimuovere classi appropriate. Ho rimosso le classi card-deck-wrapper e card-deck quando volevo renderle reattive e aggiunto le classi col-**-** appropriate. Infine, aggiungere chiamate a queste funzioni nelle aree document.ready e window.resize.

var breakpoint; 
 

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

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

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

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

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

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

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

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

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

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