如何限制卡片组的列数?

编程入门行业动态更新时间:2024-10-28 12:17:06

本文介绍了如何限制卡片组的列数?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

这是我的代码，我想要实现的只是一行四列，不多也不少，但是目前卡的数量从1-10不等，一直压缩到10.

<div class="card-deck">@foreach($resource->projects as $project)<div class="card card-project">bla bla(可以说每张卡片都是这样的)

@endforeach

解决方案

As 在文档中解释，卡片布局(牌组、组和列)...

目前，这些布局选项尚未响应."

因此，您不能限制 card-deck 中每行的卡片.您可以改用网格列，如果您需要卡片的高度相同，则可以使用 flexbox..

<div class="col-sm-3"><div class="card">...

... {重复 col-sm-3}..

codeply/go/AP1MpYKY2H

自 Bootstrap 4 alpha 6 起:Flexbox 现在是默认设置，因此不再需要额外的 CSS.使用 h-100 使卡片填充列的高度.

www.codeply/go/rHe6rq5L76(更新了引导程序 4.1)

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>

解决方案

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..

<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

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.