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?

目前，它们保持相同数量的列/卡片宽度，直到小于 544 像素.在 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 列/卡片宽度和 3 列/卡片宽度的 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屋！