如何使 Bootstrap 4 卡的列高度相同？

Bootstrap 4：列中的卡片高度相同

问题：

使用 Bootstrap 4，列中的卡片不同高度基于标题文本长度。即使内容的高度不同，如何实现相同高度的卡片？

答案：

与担忧相反，Bootstrap 4 列已经使用了 flexbox，这确保了它们本质上具有相同的高度。要使卡片占据各自列的整个高度，只需将 h-100 类添加到卡片中，如以下代码片段所示：

<code class="html"><div class="col-md-4 col-sm-6 col-12">
  <div class="card h-100">
    ...
  </div>
</div></code>

其他注意事项：

• 避免浮动卡片，因为这是不必要的。
• 从 .row 中删除 .card-deck 类； .col-* 应该是 .row 的直接子级。

演示：

访问 https://codeply.com/go/hKhPuxoovH 进行现场直播解决方案演示。

以上是如何使 Bootstrap 4 卡的列高度相同？的详细内容。更多信息请关注PHP中文网其他相关文章！