卡片高度不一致非bug，是bootstrap流式布局特性；h-100需配合父容器flex布局与明确高度上下文才生效，否则因继承链断裂、样式覆盖或图片加载延迟而失效。

卡片高度不一致不是 bug，是 Bootstrap 默认流式布局的必然结果；靠 h-100 单独加在 .card 上基本无效，必须配合父容器的 flex 布局和高度上下文才能生效。

为什么加了 h-100 还是不等高

h-100 只是“继承父容器 100% 高度”，但前提是父容器得有高度可被继承。常见断链点：

• .card 的直接父元素不是 .col（比如中间多套了一层 <div>），<code>h-100 就卡在半路
• .col 上写了 height、min-height 或 overflow: hidden，会截断高度继承
• .card-body 内用了 height: 200px 或 min-height: 100%，覆盖了 h-100 的拉伸效果
• 图片加载慢，.card 初始渲染时高度为 0，h-100 拉的也是 0 —— 建议加 min-height: 200px 兜底

.row 和 .col 必须同时参与 flex 布局

只给 .row 加 d-flex 不够，.col 本身不是 flex 容器，无法把高度“传”给 .card。正确链路是：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 确保 .card 的**直接父元素是 .col**（不要嵌套多余 div）
• 给每个 .col 加 d-flex 和 align-items-stretch（后者可省略，因是默认值）
• 再给 .card 加 h-100，它才能填满 .col 的高度
• 如果用 .card-img-top，注意它默认 object-fit: cover，等高后可能严重裁剪 —— 建议统一设 height: 180px 或 min-height: 180px

卡片内部内容对齐到底部按钮

即使外部高度统一了，标题短、文字少的卡片里按钮还是会往上浮。解决方法不是调 margin-top，而是用 flex-column 接管内部排列：

• .card 和 .card-body 都要加 h-100，否则内部 flex 无高度参考
• .card-body 加 d-flex flex-column，让它成为纵向弹性容器
• 正文区域（如 .card-text）加 flex-grow-1，自动占满中间空白
• 按钮加 mt-auto（不是 align-self-end），更可靠地推到底部

响应式下等高突然失效的典型原因

大屏正常、小屏崩掉，大概率是媒体查询或响应式类悄悄破坏了 flex 链路：

• 检查自定义 CSS 是否含类似 @media (max-width: 768px) { .row { align-items: flex-start !important; } }
• .d-md-flex 在小屏会退化为 display: block，应改用 d-flex d-md-flex
• Bootstrap v3 项目里硬加 d-flex 到 .row 会破坏 float 栅格，需同步处理清除浮动
• IE11 下 flex: 1 不稳，建议用 flex: 1 1 auto，避免 flex-basis: 0 导致卡片塌缩

真正卡住的点往往不在卡片本身，而在 .col 是否被当成 flex 容器、高度是否被某处 min-height 或 overflow 截断、以及图片加载时机带来的初始高度计算偏差——这些细节不处理，h-100 就只是个摆设。