如何在Bootstrap5中通过CSS轻松实现响应式等高卡片？-css教程-PHP中文网

Bootstrap 5.3+原生支持CSS Grid布局，用grid、g-cols-3、g-gap-3等类可实现语义清晰、跨浏览器一致的等高卡片布局，无需h-100与Flex嵌套 hack。

如何在bootstrap5中通过css轻松实现响应式等高卡片？

直接用 grid 类，别再套 h-100 + d-flex + flex-column 那套了。 Bootstrap 5.3+ 原生支持 CSS Grid，一行 class="grid g-cols-3 g-gap-3" 就能实现真正语义清晰、无需 hack 的等高卡片布局，且默认跨浏览器对齐一致。

为什么 `h-100` + Flex 在卡片里经常失效

很多人给每个 .card 加 h-100，再在 .card-body 上加 d-flex flex-column h-100 和 flex-grow-1，以为就能等高。但实际中常遇到：

父容器没设高度（比如 .row 没 style="height: 100%"），h-100 失效 —— 它只继承父级显式高度
多个 .card 所在的 .col 高度不一致（比如文字行数不同、图片尺寸浮动），Flex 无法跨列拉齐
小屏下 col-12 单列堆叠，h-100 反而把卡片撑得过高，破坏阅读节奏
IE11 兼容需求已基本消失，没必要为它牺牲现代布局能力

`grid` 类怎么写才真正起作用

Bootstrap 5.3 的 grid 是独立容器类，不是对 row 的增强。它绕过 Flex 嵌套陷阱，直接启用 CSS Grid Layout：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

必须用 包裹卡片，不能放在 .row 内 —— 否则 Grid 规则被 Flex 覆盖
g-cols-3 表示“每行最多 3 列”，自动响应断点：小屏退化为 1 列，中屏 2 列，大屏 3 列（无需额外写 g-cols-sm-2）



g-gap-3 控制网格间距，等效于 gap: 1rem；比 mb-3 更可靠，不会因卡片内容高度变化导致间隙错位
卡片自身不用任何高度类：.card 会自然被 Grid 行轨道拉齐，.card-body 也无需 h-100

<div class="grid g-cols-3 g-gap-3">
  <div class="card">
    @@##@@
    <div class="card-body">
      <h5 class="card-title">标题</h5>
      <p class="card-text">任意长度的文字</p>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>
兼容性与 fallback 策略
Grid 在 Chrome/Firefox/Safari/Edge 104+ 均稳定支持，唯一需留意的是旧版 Android WebView（≤4.4）和部分企业内网 IE 残留环境：

如果必须支持 IE11，保留 Flex 方案，但改用 display: flex; flex-wrap: wrap 的自定义容器，而非依赖 .row

不要混用 grid 和 row —— 同一区域只能选一种布局模型，否则计算冲突
可通过 @supports (display: grid) 做渐进增强，但多数项目已可安全启用
检查是否启用了 Bootstrap 的 Grid 支持：确保你用的是 5.3+ 版本，且未在 Sass 中关闭 $enable-cssgrid: false


Grid 等高是靠行轨道（grid row track）统一分配高度，不是靠子元素“争抢”高度。这意味着哪怕某张卡片里塞了 10 行文字、另一张只有图标，它们的底部也会严格对齐 —— 这才是真正的“等高”，不是视觉模拟。