如何在 Bootstrap 4 中创建响应式卡片组？

基于视口的列数的 Bootstrap 4 Card-Deck

在 Bootstrap 4 中创建具有响应式列数的卡片组需要对网格系统和 Bootstrap 中引入的新 Flexbox 功能有一定的了解4.

使用网格列

我们可以使用网格 col-*，而不是依赖使用表格单元格显示属性的卡片组类类来指定所需的列宽。这使我们能够更好地控制布局，并允许我们创建响应式设计。

启用 Flexbox

在 Bootstrap 4 中，默认情况下启用 Flexbox。但是，如果您使用的是旧版本或想要手动启用 Flexbox，请添加以下 CSS 规则：

<code class="css">.row > div[class*='col-'] {
  display: flex;
}</code>

设置相等高度

要使由于卡片高度相等，我们可以利用 Flexbox 的功能来自动调整其子项的高度以匹配最高的子项。只需将 h-100 类添加到每张卡，这将使其高度为 100% 并拉伸以匹配列中最高的卡。

<code class="html"><div class="row">
  <div class="col-6 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-4 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-2 h-100">
    <div class="card">...</div>
  </div>
</div></code>

通过结合这些技术，您可以创建 Bootstrap 4 卡- 甲板适应不同的视口尺寸，确保卡片保持相同的高度，并根据可用空间调整适当的尺寸。

以上是如何在 Bootstrap 4 中创建响应式卡片组？的详细内容。更多信息请关注PHP中文网其他相关文章！