这是bootstrap 3浮动布局的自然表现：.row用float:left排列.col-*，但浮动元素不参与文档流高度计算，导致内容高度不一时视觉错位；必须保证container→row→col三层结构完整，正确使用.clearfix和断点类，并避免误用height:100%。
为什么 .row 里 .col 高度不一会错位
这不是 bug，是 Bootstrap 3 浮动布局的自然表现：.row 用 float: left 排列 .col-*，但浮动元素不参与文档流高度计算。当某列内容特别高（比如长文本卡片），它会把整行撑高，而下一行的 .row 默认从这一行底部开始渲染——如果没清除浮动，视觉上就像“被顶偏”或“右移”。尤其在嵌套、多断点混用时更明显。
必须保证 container → row → col 三层结构完整
常见错误是漏写 .row 或嵌套错误：
- ❌ 错误：直接把多个
.col-md-6塞进.container，没有.row包裹 → 第三列可能掉到第一列下方 - ❌ 错误：
.col-xs-6里又直接放.col-xs-3，没加内层.row→ 内层列左右各多出 15px padding，必然溢出 - ✅ 正确：每一组并排列必须独立包裹在自己的
.row中，且.row必须在.container或.container-fluid内
什么时候该手动加 .clearfix
.row 自带 .clearfix，但只对自身子元素生效。以下场景需显式插入：
- 同一
.row内混用不同断点类（如.col-xs-12 .col-md-6 .col-lg-4），中屏下某列突然变窄但内容变长 → 在该列后加<div class="clearfix visible-md-block"></div> - 在
.col-*内部做多列布局，且父级没用.row→ 给那个内部容器加.clearfix - 用了
.col-*但没包.row（比如旧代码迁移）→ 直接给父容器加.clearfix
注意：.visible-md-block 不是“显示/隐藏”，而是仅在中屏生效的 display: block; clear: both；别用 .hidden-md 替代，它不带清除行为。
避免用 h-100 或 height: 100% 硬拉高度
h-100 在 Bootstrap 3 中无效，因为它是 Bootstrap 4+ 的 utility 类；而 height: 100% 在 .col-* 上基本不起作用——.row 高度由内容撑开，没有“100%”可参照。
- 真正有效的做法：给
.row设min-height（如min-height: 200px），再给子.col-*加height: 100%+display: flex; flex-direction: column - 更稳妥的卡片方案：用
.card包裹内容，.card-body加flex-grow: 1，前提是父.col有d-flex flex-column（需自行引入对应 CSS，Bootstrap 3 原生不支持） - JS 补齐高度是最后手段：监听
resize和 DOM 变化，取每行最大getBoundingClientRect().height统一赋值，但会干扰渲染性能
最常被忽略的是：错位问题往往不是内容本身的问题，而是结构层级断裂——先检查 .container 是否缺失、.row 是否被意外嵌套、.col-* 总和是否超出 12，再考虑清除浮动或高度控制。
