这是我的代码,我想要实现的只是连续四列,并且不超过此数目,但是目前,卡的数量在1到10之间,它们一直压缩到10. >
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.
<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>推荐答案
为在文档中进行了说明,卡片布局(甲板,组和列) ...
目前,这些布局选项尚未响应."
"For the time being, these layout options are not yet responsive."
因此,您不能在card-deck中限制每行的卡片.您可以改用网格列,如果需要卡片的高度相等,则可以使用flexbox.
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..
<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>codeply/go/AP1MpYKY2H
从Bootstrap 4 alpha 6起: Flexbox现在是默认设置,因此不再需要多余的CSS.使用h-100使卡片填充列的高度.
As of Bootstrap 4 alpha 6: Flexbox is now the default so the extra CSS is no longer needed. Use h-100 to make the cards fill the height of the columns.
www.codeply/go/rHe6rq5L76 (针对 Bootstrap 4.1 )
更多推荐
如何限制卡座的列数?
发布评论