具有相同宽度的响应式卡片组

Question

我正在设置一个网络应用程序，它调用渲染动态数量的卡片，这将显示一些信息。

我设法让它们使用相同的高度，但不知道如何让它们使用相同的宽度和高度，即使它们连续的卡片数量少于适合的数量，它们也会拉伸和我不想要这种行为。

    <div class="card-deck">

    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">Titel</h4>
        <h6 class="card-subtitle mb-2 text-muted">Subtitle</h6>
        <p class="card-text">Text break </p>
        <button class="btn btn-primary my-2 my-sm-0" type="submit"><fa-icon [icon]="['fas', 'sign-in-alt']"></fa-icon> Login</button>
      </div>

    </div>
    </div>
</div>```

Expected result: Every card uses the same width
Actual result: Cards in the last row (if they are less than the amount that would fit) stretch to the whole container

Answer 1

这可以通过使用

来实现

<div class="card mb-4 col-x">

col-x 中的 x，范围可以从 1 到 12（来自引导网格），

它将生成指定宽度的甲板。

请参考代码链接：

https://codepen.io/diveshpanwar/pen/WqvPNW

了解更多关于Bootstrap grids