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

Bootstrap 4 - 制作列中等高的卡片

问题：

处理 Bootstrap 卡片时，高度卡片的数量可能会根据卡片标题的长度而有所不同。这种不一致会导致按列排列时卡片的高度不同。

解决方案：

利用 Bootstrap 4 列中已采用的 Flexbox 来确保所有卡具有相同的高度。通过向每张卡片添加 h-100 类（表示高度为 100%），卡片将自动填充各自列内的可用高度。

示例：

<code class="html"><div class="row">
  <div class="col-md-4 col-sm-6 col-12">
    <div class="card h-100">
      ...
    </div>
  </div>
  <!-- Similar cards and columns -->
</div></code>

附加说明：

• 浮动卡片是不必要的，因为它们已经按行和列排列。
• 避免嵌套 .col-* .card-deck 中的类；相反，它们应该直接放置在 .row 中。

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