如何在 Bootstrap 4 列中创建等高卡片？

Bootstrap 4 列内的等高卡片

问题

许多使用 Bootstrap 4 的开发人员遇到一个常见问题：列内的卡片高度经常不同，主要是由于内容或标题大小的差异。这可能会造成不均匀且视觉上没有吸引力的布局。

解决方案

要在 Bootstrap 4 列中实现等高卡片，请利用 h-100 类来设置高度卡片数占包含列的 100%。这可确保卡片占据可用空间的整个高度。

实现

HTML 标记：

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

注意：

• .col-* 类应该直接应用于 .card div，而不是像 这样的中间元素。 card-deck。
• 在卡片上使用 float 是不必要的。
• h-100 类可以应用于所有卡片在一列中或选择性地针对特定卡片进行目标高度调整。

示例代码 (Codeply):

https://codeply.com/go/ hKhPuxoovH

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