因为Bootstrap 3的.row默认为block布局，依赖float和width排版；加display: flex后，浏览器忽略子列的float与width声明，导致列宽塌缩为0或堆叠左上角，必须同步清除子列浮动并设flex属性。
为什么直接给 .row 加 display: flex 会失效
因为 Bootstrap 3 的 .row 默认是 display: block，子列 .col-md-4 等依赖 float 和显式 width（如 width: 33.333333%）来排版。一旦父容器变成 flex，浏览器会直接忽略子元素的 float 和 width 声明——但 BS3 的栅格类没做任何适配，导致列宽塌缩为 0px 或全部堆叠在左上角。
常见错误现象包括：.row 在开发者工具中显示为空白区域；.col-md-4 的 computed width 是 0px；三列内容挤成一竖条而非横向排列。
必须同步重置子列的 float 和 width
只改 .row 不够，关键是要让子列真正成为 Flex 项目。这需要两步同时生效：
-
.row容器设为display: flex（含全前缀） -
.col-*子元素清除浮动、释放宽度，并声明为弹性项
推荐写法（放在自定义 CSS 文件末尾，确保覆盖 BS3 默认规则）：
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row-eq-height > [class*="col-"] {
float: none !important;
width: auto !important;
flex: 1 0 auto;
}
注意：flex: 1 0 auto 比 flex: 1 更安全——它允许列按内容基线伸缩，避免因强制填满而破坏响应式比例；!important 是必要的，否则 BS3 的 float 和 width 规则仍会生效。
嵌套卡片或内容不等高怎么办
align-items: stretch 只对 .row 的**直接子元素**起作用。如果 .col-md-4 里包着一个 .card，那 .card 不会自动等高——它只是普通块级元素，高度由内容决定。
要让卡片也等高，需再加一层 Flex 控制：
- 给
.col-md-4加display: flex; flex-direction: column; - 给
.card加flex: 1;（或height: 100%，但后者在某些嵌套下不可靠） - 若
.card内还有.card-body，它也得设flex: 1才能撑满
别指望 h-100 或 flex-fill：这些是 Bootstrap 4+ 的类，BS3 中不存在，加了也无效。
兼容性与 Safari/IE 的实际坑
Flexbox 在 IE10/11 和 Safari 10–14 中行为不稳定，不是“不支持”，而是部分特性被错误解析：
-
flex-wrap: wrap在 IE10/11 下常失效 → 列强行挤在一行并溢出 -
flex: 1 1 auto在 IE11 中第二个参数（flex-shrink）可能被忽略 → 改用flex: 1或显式拆解 - Safari 12–14 对
display: -webkit-flex有兼容 bug，反而应**只写标准display: flex**（Safari 15.4+ 已移除前缀支持）
最易被忽略的一点：等高效果是否成立，不取决于你写了多少 class，而取决于最终 computed styles 中 .row 确实是 flex，且所有 .col-* 的 float 和 width 都被成功覆盖——打开开发者工具逐层检查比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
