根本原因是.row的align-items: stretch仅使本行.col等高，下一行从该行底部开始渲染，导致视觉错位；嵌套时漏写.row会丢失flex布局和负外边距抵消机制。

bootstrap 栅格中，.col 内容高度不一致时，下一行会“被顶起”或“塌陷”，这不是 bug，是 flex 布局的默认行为——.row 的 align-items: stretch 让所有列拉伸到最高子项高度，但仅限本行；跨行之间无约束。解决的关键不是压平高度，而是控制对齐上下文。

为什么 .row 里多个 .col 高度不同会导致下一行错位

根本原因是：Flex 容器（即 .row）只保证本行内列等高，不干预下一行的起始位置。当某列内容特别高（比如长文本、图片、卡片），它会把整行撑高，而下一行的 .row 仍从该高度底部开始渲染——如果没加 clear 或没重置上下文，视觉上就像“断层”或“右移”。尤其在嵌套或浮动回退场景（如 Bootstrap 3 或禁用 flex）中更明显。

• .col-4 里放一张图 + 三行文字，高度 320px；相邻 .col-4 只有一行字，高度 60px → 整行按 320px 渲染
• 下一行的 .row 默认紧贴其后，但若父容器没设 overflow: hidden 或清除浮动，可能因 margin 折叠或 float 残留导致偏移
• 移动端堆叠时（col-12），错位消失——说明问题出在多列并排的 Flex 行上下文，而非内容本身

给 .col 加 h-100 不起作用？检查父级高度来源

h-100 是相对高度，依赖父元素有明确高度值。直接给 .col 加 h-100 失效，往往因为：.row 高度由内容撑开，没有“100%”可参照；或者 .container / .row 被设了 min-height: auto（默认值）。

• ✅ 正确做法：在 .row 上加 min-height: 200px（数值按业务卡片最小预期定），再给子 .col 加 h-100 d-flex flex-column
• ⚠️ 错误写法：height: 100% 在 .col 上——它不会继承 .row 的计算高度，Flex 子项不响应百分比 height
• ? 更稳妥：用 d-flex flex-column 包裹卡片内容，再对正文区加 flex-grow-1，让文字区域自动填满剩余空间

卡片高度不一致，但不想固定 min-height 怎么办

硬设 min-height 容易在文字极少时留白过多，或在超长内容时溢出。动态适配更灵活，但优先推荐 CSS 方案，避免 JS 干预布局流。

VPS Bootstrap

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

下载

• 用 .card { height: 100% } + .card-body { flex-grow: 1 }，前提是父 .col 有 d-flex flex-column h-100
• 避免 card-deck：Bootstrap 5.3+ 已废弃，且它只是简单设 display: flex; flex-wrap: wrap，不解决跨行等高
• 如果必须 JS 补齐，监听 resize 和 DOM 插入，用 getBoundingClientRect().height 找出每行最大高度，再统一设给该行所有 .col ——但注意：这会触发重排，慎用于列表滚动场景

嵌套时子 .col 错位，90% 是漏写了 .row

在 .col-8 里直接放三个 .col-4，浏览器会渲染错乱：右侧溢出、换行失效、高度不齐。这不是响应式断点问题，是栅格上下文丢失。

• ❌ 错误结构：
  ...

  ...
• ✅ 正确结构：
  ...
• .row 不是装饰，它提供 margin: 0 -15px 抵消 .col 的 padding: 0 15px，同时激活 Flex 布局——缺一不可
• Bootstrap 4/5 中若项目全局禁用了 flex（如通过 Sass 变量 $enable-flex 设为 false），.row 会回退到 float，此时必须手动加 clearfix，否则错位更隐蔽

最常被忽略的一点：每一层 .row 都在重置布局上下文。嵌套越深，漏掉某一层 .row 的代价越大——它不会报错，但会让后续所有栅格行为脱离预期。检查工具栏里看子 .col 是否意外带上了左右 15px 内边距，基本就能定位问题所在。