css - Bootstrap 4 card deck table-cell 列响应基于视口(viewport)？

Question

所以在 Bootstrap v4 中，我看到卡片组 ( http://v4-alpha.getbootstrap.com/components/card/#decks ) 有一个新功能，它可以组成一组卡片，它们的高度根据组中最高的内容而定。

列数似乎取决于组中有多少个 card-div。有没有办法根据视口(viewport)改变列数？比如大宽度4列/卡宽，中等宽度2列，小宽度1列？

目前，它们保持相同数量的列/卡片宽度，直到小于 544 像素。在 544px 或更大时，它们有 display: table-cell 和 screen (min-width: 544px) 规则。

是否可以通过仅更改 CSS 来使卡片根据视口(viewport)具有不同数量的列？

编辑 - 由于 IE 支持，希望不使用 flex/flexbox

4 col/card 宽和 3 col/card 宽的 Codepen 示例位于 http://codepen.io/jpost-vlocity/full/PNEKKy/

Answer 1

我找到了一个使用 css-grid 的非常简单的解决方法。您可以调整 250px 以适合您的用例。

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}