如何在具有响应列数的 Bootstrap 4 卡组中实现相同的卡高度？

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

场景：

实现 Bootstrap 4 的 Card-Deck 功能以确保不同视口大小的卡片高度相同。

问题：

默认情况下，无论视口大小如何，卡片组都会连续显示四张卡片，从而导致不希望的内容大小调整

解决方案 1：网格列 (Bootstrap 4 Alpha 2)

在 Bootstrap 4 Flexbox 支持之前，解决方法涉及使用

;具有适当网格列类（例如，col-*）的元素来控制卡片宽度。然后应用 Flexbox 强制等高：

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

解决方案 2：h-100 类（Bootstrap 4 Alpha 6 及以上）

Flexbox 成为默认值Bootstrap 4 Alpha 6，出现了一个更简单的解决方案：

<code class="css">.h-100 {
  height: 100%;
}</code>

将 h-100 类应用于卡片元素，自动将其高度设置为 100%，使它们高度相等：

<code class="html"><div class="card h-100">
  ...
</div></code>

注意：

对于更具响应性的布局，请考虑使用断点类，例如 d-*-col（例如 d-md-col-6）来指定特定的列数屏幕尺寸。

以上是如何在具有响应列数的 Bootstrap 4 卡组中实现相同的卡高度？的详细内容。更多信息请关注PHP中文网其他相关文章！