如何限制卡座的列数? [英] How to limit number of columns of card-deck?

问题描述

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

http://codeply.com/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.

https://www.codeply.com/go/rHe6rq5L76 (针对 Bootstrap 4.1 )

这篇关于如何限制卡座的列数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！