CSS Bootstrap 4 卡片组表格单元格列响应基于视口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36487389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 card deck table-cell columns responsive based on viewport?
提问by jpostdesign
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.
所以在 Bootstrap v4 中，我看到卡片组（http://v4-alpha.getbootstrap.com/components/card/#decks）有一个新功能，它可以制作一组卡片，根据最高的内容，它们的高度相等在组中。
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?
列数似乎取决于组中有多少 card-div。有没有办法根据视口改变列数？例如，4 列/卡片宽在大宽度，2 宽在中等宽度，1 个在小宽度？
Currently they stay the same number of columns/cards wide until less than 544px. At 544px and greater, they have display: table-cellwith the screen (min-width: 544px)rule.
目前，它们保持相同数量的列/卡片宽度，直到小于 544px。在544px和更大，他们必须display: table-cell与screen (min-width: 544px)规则。
Is there a way to make the cards have different numbers of columns based on viewport by changing only the CSS?
有没有办法通过仅更改 CSS 使卡片基于视口具有不同数量的列？
Edit -Looking to not use flex / flexbox due to IE support
编辑 -由于 IE 支持，希望不使用 flex / flexbox
Codepen example of 4 col/card wide and 3 col/card wide at http://codepen.io/jpost-vlocity/full/PNEKKy/
以4 COL /卡宽3 COL /卡宽Codepen示例http://codepen.io/jpost-vlocity/full/PNEKKy/
回答by esitarz
I found a pretty easy workaround using css-grid. You could tweak the 250px to fit your use case.
我找到了一个使用 css-grid 的非常简单的解决方法。您可以调整 250px 以适合您的用例。
.card-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: .5rem;
}
回答by Zim
Update 2019
2019 年更新
It's hard to set the cards widths (responsive) with card-deckbecause it uses display:table-celland width:1%.
很难设置卡片宽度（响应式），card-deck因为它使用display:table-cell和width:1%。
I found it easier to make them responsive using the cards inside the Bootstap grid col-*and then you can use the grid viewport breakpoints. Enable Bootstrap's flexbox if you want the cards to be equal height like the card-deck.
我发现使用 Bootstap 网格内的卡片更容易使它们具有响应性col-*，然后您可以使用网格视口断点。如果您希望卡片的高度与card-deck.
http://www.codeply.com/go/6eqGPn3Qud
http://www.codeply.com/go/6eqGPn3Qud
Also, img-responsivehas changed to img-fluid
此外，img-responsive已更改为img-fluid
Bootstrap 4.0.0
引导程序 4.0.0
Flexbox is now the default, but there is still not a supportedway to make responsive card-deck's. The recommended way is to use cards inside the grid:
Flexbox 现在是默认的，但仍然没有支持的方式来制作响应式卡片组。推荐的方法是在网格内使用卡片：
Another way to make a responsive card-deck, is using responsive reset divs every xcolumns. This will force cards to wrap at specific breakpoints.
另一种制作响应式卡片组的方法是每x列使用响应式重置 div 。这将强制卡片在特定断点处换行。
For example: 5 on xl, 4 on lg, 3 on md, 2 on sm, etc..
例如：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
回答by Karl Doyle
Here you go, http://codepen.io/KarlDoyle/pen/pypWbR
给你， http://codepen.io/KarlDoyle/pen/pypWbR
The main thing is that you have to override the styles. as shown below.
最重要的是你必须覆盖样式。如下所示。
.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*/
}
回答by FrankieDoodie
Bootstrap 4 card deck responsive
Bootstrap 4 卡片组响应式
I tried to use the <container>, <row>and <col>to make it responsive, but you lose the
我试图使用<container>,<row>并<col>使其响应，但你失去了
All the cards have the same height
所有卡片的高度相同
feature of the card deck, if you do that. What you need is CSS:
卡组的功能，如果你这样做。你需要的是 CSS：
.card-deck {
margin: 0 -15px;
justify-content: space-between;
}
.card-deck .card {
margin: 0 0 1rem;
}
@media (min-width: 576px) and (max-width: 767.98px) {
.card-deck .card {
-ms-flex: 0 0 48.7%;
flex: 0 0 48.7%;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.card-deck .card {
-ms-flex: 0 0 32%;
flex: 0 0 32%;
}
}
@media (min-width: 992px)
{
.card-deck .card {
-ms-flex: 0 0 24%;
flex: 0 0 24%;
}
}
Here is my CodePen: Bootstrap 4 card deck responsive
这是我的 CodePen： Bootstrap 4 卡片组响应式
回答by kornieff
Simply drop h-100class on cards in grid.
只需h-100在网格中的卡片上放下课程。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-6 my-3">
<div class="card h-100"> <!-- full height -->
<div class="card-header"></div>
<div class="card-body">1</div>
<div class="card-footer"></div>
</div>
</div>
<div class="col-sm-6 my-3">
<div class="card h-100"> <!-- full height -->
<div class="card-header"></div>
<div class="card-body">2a <br> 2b <br> 2c</div>
<div class="card-footer"></div>
</div>
</div>
<div class="col-sm-6 my-3">
<div class="card h-100"> <!-- full height -->
<div class="card-header"></div>
<div class="card-body">3</div>
<div class="card-footer"></div>
</div>
</div>
</div>回答by Mohammad Ayoub Khan
Try this
尝试这个
<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});
}
}
}
Demo on codepen Bootstrap 4 responsive card-deck
Codepen Bootstrap 4 响应式卡片组上的演示
