Bootstrap 3 中需手动启用 Flexbox 实现列等高：给行加 .row-eq-height 类（含全浏览器前缀 display: flex），子列设 display: flex; flex-direction: column，嵌套内容层也需 flex: 1；禁用全局修改 .row，避免破坏原有栅格。
Bootstrap 3 中怎么让列自动等高（Flex 填充）
Bootstrap 3 默认栅格不支持列等高，col-md-4 这类元素高度由内容决定，内容短的列会“塌陷”，导致边框/背景断裂。要填满父容器高度，必须手动启用 Flexbox 行为。
核心做法是给行容器加 display: flex，再让子列用 flex: 1 拉伸：
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row-eq-height > [class*="col-"] {
display: flex;
flex-direction: column;
}
注意两点：
- 必须同时写全浏览器前缀（
-webkit-、-ms-），否则 IE10/11 或旧版 Safari 不生效 - 如果列内还有
div.info这类包裹层，它也得设flex: 1，否则内容仍不会撑满 - 别直接改
.row全局样式——会影响所有栅格，应单独加自定义类如row-eq-height
Bootstrap 4+ 的 flex-fill 和 d-flex 怎么用
Bootstrap 4 起原生支持 Flexbox，但 flex-fill 并不是“让元素填满父高”的万能解，它只在父容器是 d-flex 且设置了 flex-direction: row 或 column 时才起作用。
常见误用：
- 给普通
div直接加flex-fill→ 无效，父级没d-flex - 在
flex-direction: row下对子项用flex-fill→ 它拉伸的是宽度，不是高度 - 想让某列占满剩余高度，却忘了父容器需设
min-height或height→ Flex 无参考高度可填
正确组合示例：
<div class="d-flex flex-column h-100"> <header>Header</header> <main class="flex-fill">Content</main> <footer>Footer</footer> </div>
Flexbox 在 Bootstrap 中的兼容性坑
Flexbox 本身在 IE10+ 支持有限，而 Bootstrap 3 完全不内置 Flex，Bootstrap 4 虽支持，但 IE10/11 对 flex-wrap、align-content 等属性有 bug。
典型问题：
-
flex-wrap: wrap在 IE10/11 下失效 → 列强行挤在一行，溢出容器 -
align-items: stretch在 IE10 下不触发子项拉伸 → 等高失效 - 使用
flex: 1 1 auto时，IE11 可能忽略第二个参数 → 需显式写成flex: 1
若项目必须支持 IE10，建议放弃 Flex 等高方案，改用 JS 方案（如 matchHeight 插件）或基于 table-cell 的 hack。
为什么不用 Flexbox 就不行？传统方案差在哪
有人试过用 min-height + padding-bottom + margin-bottom 模拟等高，或靠 display: table-cell 强制对齐。这些方案的问题很实际：
-
table-cell不响应flex断点，col-sm-6在小屏变单列后，table-cell仍并排 → 布局崩溃 - JS 计算高度在动态内容（如异步加载文本、图片懒加载）下容易漏算或重复计算
- 伪元素 +
absolute拉伸背景，无法真正撑开父容器高度，导致下方元素定位错乱
Flexbox 的 stretch 是唯一能在 CSS 层面响应内容变化、自动重算、且与 Bootstrap 栅格断点天然协同的方案——前提是版本和写法对得上。
