基于视口响应的 Bootstrap 4 卡片组表格单元列？

Question

所以在 Bootstrap v4 中，我看到卡片组（ http://v4-alpha.getbootstrap.com/components/card/#decks ）有一个新功能，它可以制作一组卡片，它们的高度根据最高的内容相等在群里。

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

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

有没有办法通过仅更改 CSS 来根据视口使卡片具有不同数量的列？

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

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

原文由 jpostdesign 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这个

<div class="container">
    <div class="card-deck">
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
    </div>
</div>

 // Bootstrap 4 breakpoints & gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-gutter-width: 30px !default;

// number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
        }
    }
}

在 codepen Bootstrap 4 响应式卡片组上 演示

原文由 Mohammad Ayoub Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议