Bootstrap 4卡座表单元列是否基于视口响应? [英] Bootstrap 4 card deck table-cell columns responsive based on viewport?

问题描述

因此，在Bootstrap v4中，我看到了卡片组的新功能( http://v4-alpha.getbootstrap.com/components/card/#decks )，制作一组卡，其高度根据该组中的最高内容而相等.

So in Bootstrap v4, I see there's a new feature for card decks ( http://v4-alpha.getbootstrap.com/components/card/#decks ) that makes a group of cards, with their height equal according to the tallest content in the group.

显示的列数取决于组中的card-div数.有没有一种方法可以根据视口更改列数?例如，每宽卡宽4列/宽，中宽2宽/小宽度1?

It appears the number of columns are based on how many card-div's are in the group. Is there a way to make the number of columns change based on the viewport? For example, 4 columns / card wide at large width, 2 wide at medium width, and 1 at small width?

当前，它们保持相同数量的列/卡宽度，直到小于544px.在544px及更高的像素上，它们具有display: table-cell和screen (min-width: 544px)规则.

Currently they stay the same number of columns/cards wide until less than 544px. At 544px and greater, they have display: table-cell with the screen (min-width: 544px) rule.

是否有一种方法可以通过仅更改CSS来使卡基于视口具有不同的列数?

Is there a way to make the cards have different numbers of columns based on viewport by changing only the CSS?

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

Edit - Looking to not use flex / flexbox due to IE support

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

推荐答案

我发现使用css-grid的一种非常简单的解决方法.您可以调整250px以适合您的用例.

I found a pretty easy workaround using css-grid. You could tweak the 250px to fit your use case.

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

这篇关于Bootstrap 4卡座表单元列是否基于视口响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！