twitter-bootstrap 如何限制卡片组的列数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38895106/
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
How to limit number of columns of card-deck?
提问by Abdussami Tayyab
This is my code, what I want to achieve is only four columns in a row, and no more or less than that, but currently, the number of cards range from 1-10, they keep compressing until 10.
这是我的代码，我想要实现的只是一行四列，不多也不少，但是目前卡的数量从1-10不等，他们一直压缩到10。
<div class="card-deck-wrapper">
<div class="card-deck">
@foreach($resource->projects as $project)
<div class="card card-project">
bla bla (every card let's say is like this)
</div>
@endforeach
</div>
</div>
回答by Zim
As explained in the docs, Card layouts (decks, groups and columns)...
"For the time being, these layout options are not yet responsive."
“目前，这些布局选项还没有响应。”
Therefor, you can't limit the cards per row in the card-deck. You could use grid columns instead, and flexbox if you need the cards to be equal height..
因此，您不能限制card-deck. 您可以改用网格列，如果您需要卡片的高度相同，则可以使用 flexbox。
<div class="row">
<div class="col-sm-3">
<div class="card">
...
</div>
</div>
<div class="col-sm-3">
<div class="card">
...
</div>
</div>
... {repeat col-sm-3}..
</div>
http://codeply.com/go/AP1MpYKY2H
http://codeply.com/go/AP1MpYKY2H
As of Bootstrap 4 alpha 6:Flexbox is now the default so the extra CSS is no longer needed. Use h-100to make the cards fill the height of the columns.
从 Bootstrap 4 alpha 6 开始：Flexbox 现在是默认设置，因此不再需要额外的 CSS。使用h-100使卡的栏的高度。
https://www.codeply.com/go/rHe6rq5L76(updated demo for Bootstrap 4.1)
回答by Jaroslaw Jankowiak
You can limit number of cards in one row with .cards-columns
您可以使用 .cards-columns 限制一行中的卡片数量
<div class="card-columns">
<div class="card-deck-wrapper">
<div class="card-deck">
@foreach($resource->projects as $project)
<div class="card card-project">
bla bla (every card let's say is like this)
</div>
@endforeach
</div>
</div>
</div>
And in css:
在 css 中：
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
More https://v4-alpha.getbootstrap.com/components/card/#decks
