Bootstrap 4張卡片表格單元列基於視口響應？

Question

所以在Bootstrap v4中，我發現卡組的一個新功能（http://v4-alpha.getbootstrap.com/components/card/#decks）可以製作一組卡片，根據組中最高的內容，它們的高度相等。

看起來列的數量取決於組中有多少個卡片組。有沒有辦法讓列的數量根據視口改變？例如，寬度爲4列/寬，中寬爲2寬，寬度爲1？

目前他們保持相同數量的列/卡寬，直到少於544px。在544px或更大，他們有display: table-cell與screen (min-width: 544px)規則。

有沒有辦法通過改變CSS來使卡片具有不同數量的基於視口的列？

編輯 -展望未使用的Flex/Flexbox的由於IE支持

Codepen例如4 COL /卡闊和http://codepen.io/jpost-vlocity/full/PNEKKy/

Answer 1

在這裏你去3 COL /卡寬， http://codepen.io/KarlDoyle/pen/pypWbR

最重要的是你必須重寫樣式。如下所示。

.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

更新2018

這很難，因爲它使用display:table-cell和width:1%設置卡寬度（響應）與card-deck。

我發現使用Bootstap網格col-*內的卡片使它們更容易響應，然後可以使用網格視口斷點。啓用Bootstrap的flexbox，如果你想讓卡片的高度相當於card-deck。

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

此外，img-responsive已更改爲img-fluid

引導4.0.0

Flexbox的現在是默認，但仍有不支持的方式，使響應卡-deck的。推薦的方法是使用卡的網格內：

Responsive cards using grid

另一種方式作出響應卡甲板，用重調的div每X列。這將迫使卡片在特定的斷點處換行。

例如：xl上的5，lg上的4，md上的3，sm上的2等等。

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

Answer 3

這可以用JavaScript來完成。

• 首先，您需要爲您的html文檔中的每個斷點創建div。

• 然後你需要在CSS中分配一個默認值。爲覆蓋默認值的每個斷點創建媒體查詢

• 然後編寫一些JavaScript。通過檢查您分配的默認css值是否被覆蓋來測試斷點的函數，以及添加和刪除適當類的另一個函數。當我想讓它們響應時，我刪除了card-deck-wrapper和card-deck類，並添加了適當的col-**-**類。最後，在document.ready和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>