如何限制卡座的列数?

编程入门行业动态更新时间:2024-10-28 08:26:43

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

这是我的代码，我想要实现的只是连续四列，并且不超过此数目，但是目前，卡的数量在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.