CSS如何实现Bootstrap卡片的高度统一_利用flexbox属性对齐内容-css教程-PHP中文网

卡片高度不一致是因文档流中内容撑开所致，需用flex布局统一：父容器设d-flex flex-wrap，子卡片加flex-fill和min-width，内部用h-100+flex-column+flex-grow-1+mt-auto对齐内容。

css如何实现bootstrap卡片的高度统一_利用flexbox属性对齐内容

卡片高度不一致是因为默认文档流布局

Bootstrap 的 .card 默认是块级元素，高度由内部内容撑开。标题短、文字少的卡片就矮，图文并茂的就高——这不是 bug，是正常流式行为。想统一高度，不能靠硬设 height（会截断内容或留白），得用弹性布局接管子元素的排列逻辑。

给卡片容器加 `display: flex` 并设置方向

关键不是给单个卡片加 flex，而是让所有卡片处于同一个 flex 容器中，且该容器启用 flex-wrap: wrap（否则会强行横向排一整行）。常见写法是把 .card 包在 .row 或自定义的 .card-deck 里：

<div class="d-flex flex-wrap gap-3">
  <div class="card flex-fill" style="min-width: 200px;">...</div>
  <div class="card flex-fill" style="min-width: 200px;">...</div>
</div>

注意三点：

flex-fill 让卡片在主轴方向尽可能伸展（需配合父容器 d-flex）
min-width 防止小屏下卡片被过度压缩变形
gap-3 替代 margin 手动控制间距，避免 flex 下 margin 折行错位

卡片内部内容对齐要用 `flex-column` + `h-100`

即使外部高度统一了，内部标题、正文、按钮仍可能上下浮动。Bootstrap 5+ 提供了现成工具类：

VPS Bootstrap

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

下载

<div class="card h-100">
  <div class="card-body d-flex flex-column h-100">
    <h5 class="card-title">标题</h5>
    <p class="card-text flex-grow-1">正文自动占满剩余空间</p>
    <a href="#" class="btn btn-primary mt-auto">按钮沉底</a>
  </div>
</div>

这里几个关键点：

h-100 必须加在 .card 和 .card-body 上，否则内部 flex 无高度参考
flex-grow-1 给正文，让它“吃掉”中间空白，避免文字少时按钮上浮
mt-auto 比 align-self-end 更可靠，它把按钮推到 flex 容器底部，不受文字行数影响

IE11 兼容性问题与 fallback 方案

如果项目必须支持 IE11，flex-wrap 和 gap 会失效。此时建议降级使用 Bootstrap 自带的 .card-deck（v4.3+ 已废弃但 CSS 仍有效），或手动加 display: -ms-flexbox 前缀。更稳妥的做法是：只在现代浏览器中启用 flex 对齐，IE 下接受高度不一致，用 @supports (display: flex) 包裹 flex 相关样式。

真正容易被忽略的是：当卡片内含图片时，img 默认是 inline 元素，会在底部留出空白间隙。务必加 img-fluid d-block 或 vertical-align: top，否则 h-100 会因这一像素间隙失效。