时间戳

首页 > 解决方案 > 具有相同宽度的响应式卡片组

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

问题描述

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

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

    <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

标签： twitter-bootstrapresponsive-designbootstrap-4

解决方案

这可以通过使用

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

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

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

请参考代码链接：

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

了解有关Bootstrap 网格的更多信息

推荐阅读