如何使用 Bootstrap 4 创建响应式卡片组？

具有响应列数的 Bootstrap 4 Card-Deck

在 Bootstrap 4 中，card-deck 功能允许您创建相同高度的卡片。但是，无论视口宽度如何，默认布局每行显示四张卡。这可能并不适合所有情况，您可能更喜欢根据可用视口空间调整列数的响应式布局。

要实现此目的，一种方法是使用 flexbox 显示属性，指定一个弹性值，强制在一定数量的列后换行。这可以使用 col-- 网格类来实现：

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

通过添加此 CSS，行中的每一列将表现得像一个 Flexbox 项目，允许它们换行和调整它们的宽度根据可用的视口空间动态变化。

但是，在 Bootstrap 4 Alpha 6 及更高版本中，这些列默认启用 Flexbox。因此，不需要额外的 CSS 即可实现所需的响应行为。相反，您可以简单地使用 h-100 类将所有卡片设置为全高。

示例：

<code class="html"><div class="card-deck-wrapper">
  <div class="row">
    <div class="h-100 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

此解决方案提供了响应式卡片组根据视口宽度调整列数，确保卡片保持对齐且高度相等。

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