如何限制卡片组的列数？

Question

这是我的代码，我想要实现的只是连续四列，并且不多于或少于此，但是目前，卡的数量范围从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>

Answer 1

作为explained in the docs, Card layouts (decks, groups and columns) ......

“目前，这些布局选项尚未响应。”

因此，您无法限制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

从Bootstrap 4 alpha 6开始：Flexbox现在是默认设置，因此不再需要额外的CSS。使用h-100使卡填充列的高度。

https://www.codeply.com/go/rHe6rq5L76（Bootstrap 4.1的更新演示）

Answer 2

您可以使用.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>

并在CSS中：

 .card-columns {
 @include media-breakpoint-only(lg) {
  column-count: 4;
  }

更多https://v4-alpha.getbootstrap.com/components/card/#decks