Question

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

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

    <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

相同宽度的响应式卡片组

1 个答案: