怎样用CSS实现Bootstrap卡片等高布局-css教程-PHP中文网

根本原因是高度继承链断裂，因.row和.col默认高度为auto，无法被h-100继承；需用d-flex+h-100组合或css grid实现等高，禁用已移除的card-group/card-deck。

怎样用css实现bootstrap卡片等高布局

为什么直接加 `h-100` 卡片还不等高

根本原因是高度继承链断了。h-100 的意思是“继承父元素高度”，但默认情况下，.row 和 .col 的高度都是 auto，没有可继承的数值。常见断点包括：

.row 没有被上层容器约束（比如没设 min-height 或没嵌在 flex/grid 容器里）
.col 外包了额外的 <div>，而该 <code><div> 没加 <code>h-100，成了继承终点
卡片里用了 position: absolute 或 float，破坏文档流高度计算
.card-img-top 未设 height 或 min-height，加载慢时初始高度为 0，拉伸失效

用 `d-flex` + `h-100` 组合强制等高（Bootstrap 5 推荐）

这是目前最可控、兼容性最好的方式，关键在于让 .card 的**直接父元素**成为 flex 容器，并提供高度上下文：

.col 必须同时加 d-flex 和 h-100：激活 flex 行为，且提供高度基准
.card 加 h-100，确保填满 .col 高度；禁止写 height 或 min-height
若含 .card-body，建议也加 h-100，否则内边距会让内容区不占满

结构示例：

<div class="row g-4">
  <div class="col h-100 d-flex">
    <div class="card h-100">
      <div class="card-body h-100"></div>
    </div>
  </div>
  <div class="col h-100 d-flex">
    <div class="card h-100">
      <div class="card-body h-100"></div>
    </div>
  </div>
</div>

用 CSS Grid 替代（现代浏览器优先）

如果你不需要支持 IE，Grid 是更简洁的选择，天然等高，无需层层 h-100：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

父容器设 display: grid 和 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
每张 .card 直接作为 grid item，不加 h-100，也不套 .card-group（已移除）
避免给 .card 设 height、min-height 或 flex 相关属性，干扰 grid 自动拉伸
内部对齐仍需单独处理：在 .card-body 上用 d-flex flex-column h-100 + flex-grow-1 + mt-auto

别再用 `card-group` 或 `card-deck`

Bootstrap 5.3+ 已彻底移除 card-group，继续使用会触发 Unknown pseudo-class selector ".card-group" 报错；card-deck 是 v4 的 table-cell 实现，不支持响应式断行，也无法与 flex/grid 混合布局。

真正容易被忽略的是图片适配——等高后，.card-img-top 若没统一 height 或 object-fit，一张露脸、一张截脚，视觉上就“不等高”了。