如何限制卡片组的列数？

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

你不能限制每行的卡数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

<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 的部分下，然后使用这些 css 属性：仅作为示例。根据需要编辑该值。

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

参考1： https: //www.w3schools.com/cssref/pr_grid-template-columns.asp 参考2： https: //developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns