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

<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

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

如何限制卡片组的列数？

2 个答案: