bootstrap 3 中直接给 .row 加 d-flex 会出问题，因其依赖 float 和 width 实现栅格，而 flex 容器会忽略这两者，导致列塌缩或错位；需同步清除子列的 float 和 width 并设为 flex 项目。
为什么直接加 d-flex 在 Bootstrap 3 里会出问题
Bootstrap 3 的 .row 默认是 display: block，子元素 .col-md-* 靠 float 排列。如果强行给 .row 加 display: flex，但没处理浮动和宽度逻辑，.col-* 会塌缩成零宽或错位——因为 Flex 容器会忽略 float 和 width，而 BS3 的栅格类又依赖这两者生效。
常见错误现象：.row 变成一行空白，或所有列堆叠在左上角；开发者工具里看到 .col-md-4 的 computed width 是 0px。
- 必须同步清除
.col-*上的float和显式width - 不能只改
.row，得让子列变成真正的 Flex 项目 - 避免用
!important覆盖太多，优先用独立 class 控制
最稳妥的自定义类写法：兼容 BS3 且不污染原样式
在你的 CSS 文件末尾（确保覆盖 BS3 默认规则）加这两条：
.d-flex-row {
display: flex !important;
}
.d-flex-col {
flex: 1 0 auto !important;
float: none !important;
width: auto !important;
}
然后 HTML 这样用：
<div class="row d-flex-row"> <div class="col-md-4 d-flex-col">短内容</div> <div class="col-md-4 d-flex-col">很长的内容……</div> <div class="col-md-4 d-flex-col">中等</div> </div>
-
flex: 1 0 auto表示“可放大、不缩小、基础尺寸由内容定”，比flex: 1更安全，避免列被强制撑满导致比例失真 -
float: none和width: auto是关键，否则 BS3 的.col-md-4仍按浮动+固定百分比渲染，与 Flex 冲突 - 不要用
flex-fill或h-100——这些是 BS4+ 的类，BS3 里不存在
嵌套列或卡片内部不等高怎么办
Flex 的 align-items: stretch 只对直接子元素生效。.row → .col-md-4 → .card 这条链里，.card 不会自动等高，除非它自己也变成 Flex 容器。
给 .col-md-4 加 d-flex-col 后，若内部有 .card，需再加一层控制：
<div class="col-md-4 d-flex-col d-flex flex-column">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<p class="flex-grow-1">内容</p>
<button class="mt-auto">操作</button>
</div>
</div>
</div>
-
d-flex flex-column让列自身成为垂直 Flex 容器，为内部拉伸提供上下文 -
h-100在 BS3 中无效，必须用height: 100%自定义类，或靠父级 Flex 拉伸传递 -
flex-grow-1和mt-auto是 BS4+ 类名，BS3 里要手写：flex: 1和margin-top: auto
IE9–IE11 兼容性与图片/文本溢出陷阱
BS3 常用于老项目，IE11 对 Flex 支持不完整：align-items: stretch 可能被忽略，尤其当列内有 position: absolute 或未设 max-width: 100% 的图片时。
- 所有图片必须加
style="max-width: 100%; height: auto;"，否则会撑破列高却不触发拉伸 - 避免在列内用
position: absolute，它脱离文档流，Flex 容器无法测量其高度 - 长单词或 URL 不换行？给列内容容器加
word-break: break-word，别指望.col-*自带 - IE10/11 需加
-ms-flex-align: stretch到.d-flex-row才能触发等高
真正麻烦的不是写法，而是 BS3 项目常混用 jQuery 插件、旧版 UI 组件或内联 style，它们可能悄悄重置 display 或加 height。每次失效，先看浏览器开发者工具里 .row 的 computed display 和 .col-* 的 computed flex 值，而不是猜类名有没有写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
