Twitter bootstrap 如何限制卡片组的列数？

这是我的代码，我想实现的是一行中只有四列，不超过或少于这一列，但目前，卡的数量从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>

@foreach（$resource->projectas$project）
布拉布拉（我们说每张卡片都是这样的）
@endforeach

您可以使用.cards列限制一行中的卡数

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

更多信息，请参阅

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

因此，您不能限制

卡片组中每行的卡片数。如果需要卡片的高度相等，可以使用网格列和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>


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


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

（更新了Bootstrap 4.1的演示版）

参考文献1：
参考资料2:
这些卡片被分成了一半。也许你可以帮我。看看这个：
  <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>

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>

.card-deck{
    margin-top: 10px;
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: .5rem;
}