Bootstrap 4 karty pokładowe kolumny tabeli reagujące w oparciu o rzutnię?

Question

Tak więc w Bootstrap v4 widzę nową funkcję dla talii kart (http://v4-alpha.getbootstrap.com/components/card/#decks), która tworzy grupę kart o wysokości równej najwyższej zawartości w grupie.

Wygląda na to, że liczba kolumn zależy od tego, ile kart-div należy do grupy. Czy istnieje sposób na zmianę liczby kolumn w oparciu o rzutnię? Na przykład: 4 kolumny/szeroka karta o dużej szerokości, 2 szerokości o średniej szerokości i 1 o małej szerokości?

W tej chwili liczba kolumn/kart jest taka sama, aż do 544 piksli. Przy 544px i więcej mają one display: table-cell z regułą screen (min-width: 544px).

Czy istnieje sposób, aby karty miały różną liczbę kolumn w oparciu o rzutnię, zmieniając tylko CSS?

Edit - Patrząc aby nie używać Flex/schematu flexbox powodu IE wsparcia

przykład Codepen 4 kol/karty szerokości i 3 col/karty szerokiej na http://codepen.io/jpost-vlocity/full/PNEKKy/

Answer 1

Proszę, http://codepen.io/KarlDoyle/pen/pypWbR

Najważniejsze, że trzeba nadpisać style. jak pokazano niżej.

.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

Aktualizacja 2018

Trudno ustawić szerokość karty (elastycznych) z card-deck ponieważ używa display:table-cell i width:1%.

Ułatwiłem ich przystosowanie za pomocą kart wewnątrz siatki Bootstap col-*, a następnie można użyć punktów kontrolnych siatki widoku. Włącz flexbox Bootstrapa, jeśli chcesz, aby karty miały taką samą wysokość, jak card-deck.

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

Również img-responsive zmienił się img-fluid

Bootstrap 4.0.0

schematu flexbox jest teraz domyślnym, ale nie jest jeszcze obsługiwany sposób, aby czuły kartę -Deck's. Zalecanym sposobem jest użycie karty wewnątrz sieci:

Responsive cards using grid

Innym sposobem na elastycznej talii kart, jest za pomocą reagujących div resetowania co x kolumny. To zmusi karty do zawijania w określonych punktach przerwania.

Na przykład: 5 na xl, 4 na 1 g, 3 na md, 2 na sm itp.

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

Answer 3

Można to zrobić z javascript.

• Najpierw trzeba utworzyć div dla każdego przerwania w dokumencie html.

• Następnie należy przypisać elementom div wartość domyślną w css. Utwórz zapytania o media dla każdego punktu przerwania, który zastąpi tę domyślną wartość:

• Następnie napisz trochę javascriptu. Jedna funkcja do testowania punktów przerwania przez sprawdzenie, czy domyślna wartość css, którą przypisałeś, została nadpisana, a druga - dodanie i usunięcie odpowiednich klas. Usunąłem klasy card-deck-wrapper i card-deck, gdy chciałem uczynić je responsywnymi i dodano odpowiednie klasy col-**-**. Na koniec dodaj połączenia do tych funkcji w obszarach document.ready i 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>