bootstrap 3 的 .row 不会报错，但混用 float 和 flexbox 会导致布局失效；应新建 .flex-row 类隔离作用域，避免破坏原生栅格逻辑。
Bootstrap 3 的 .row 为什么“报错”其实是布局失效
它根本不会报错——浏览器控制台不抛异常，但视觉上列错位、高度不齐、float 不生效、响应式断点失灵，这些才是真实问题。本质是：你试图在 Bootstrap 3 的浮动（float）系统里硬塞 Flexbox 规则，而两者互斥。
display: flex 加在 .row 上却没反应？先看 computed 值
打开 DevTools → Elements → 选中 .row → 切到 Computed 标签页，查 display 和 float：
- 若
display显示flex，但子元素.col-md-4仍左漂、换行异常、宽度塌缩 → 说明float被静默覆盖（规范行为），但 Bootstrap 3 的.col-*类本身依赖float和负 margin 实现栅格，此时已失效 - 若
float显示none或not applicable，而你代码里写了float: left→ 就是被display: flex父级直接废掉，删掉无用声明 - 若
display仍是block→ 说明你加的display: flex被更高优先级样式（比如自定义 CSS、Bootstrap 源码重写、CDN 版本混用）覆盖了
想用 Flexbox 补等高？别改 .row，改作用域和类名
Bootstrap 3 的 .row 是浮动容器，直接加 display: flex 会破坏所有栅格行为（如 col-md-6 不再自动占半宽、col-xs-12 在小屏也不强制堆叠）。真要引入 Flexbox，必须隔离作用域：
- 不碰原始
.row，新建一个类如.flex-row，并确保它只用于明确需要等高的局部区域 - 给
.flex-row加display: flex，同时给它的直接子元素（即你手动写的.col-md-6）加flex: 1 0 auto，而非依赖 Bootstrap 的浮动逻辑 - 避免把
.flex-row和原生.row混用在同一 DOM 层级，否则浮动与 flex 子项共存会导致渲染不可预测 - 如果用了
min-height或height拉高等高效果，注意height: 100%在浮动上下文中无效，优先用min-height+flex
检查是否误触了 float 与 flex 的嵌套陷阱
常见误操作不是写错一行 CSS，而是结构嵌套出问题：
-
.row外层有float: left的兄弟元素（比如侧边栏），导致整个.row被挤到右侧空白处 → 清除的是兄弟级浮动，不是.row自身 - 在
.row内部又套了一个position: absolute容器，然后在里面放.col-*→ 这时.col-*的父级已不是.row，浮动规则或 flex 规则都失效 - 用
overflow: hidden给.row“清浮动”，结果发现 flex 布局下它反而干扰了交叉轴对齐 →overflow不该用于 flex 容器高度控制，那是align-items和min-height的事
Flex 与 float 的冲突不在“谁更强”，而在“谁根本不该出现”——一旦确定用 flex 实现等高，就该彻底放弃对原生 .row 的浮动依赖，包括它的负 margin、box-sizing 重置、断点媒体查询绑定方式。否则，问题永远在边缘 case 里反复冒头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
