.col 不能直接加 d-flex，因其本身已是 row 的 flex item，再嵌套 flex 容器会导致双重 flex 冲突，引发伸缩失效、高度塌陷、对齐异常；正确做法是在 .col 的直接子元素上添加 d-flex 并配合 h-100 和 flex-column。
直接给 .col 加 d-flex 会导致内部元素不伸缩、高度塌陷甚至对齐失效——因为 .col 本身已是 flex item，再强行让它当 flex 容器会触发双重 flex 上下文冲突。
为什么 .col 不能直接加 d-flex
.col 的父级 .row 是 flex 容器，所以每个 .col 默认是 flex item，自带 flex: 0 0 auto。此时你再给它加 d-flex，不是“启用 Flex 布局”，而是试图在一个已被 flex 管理的子项里嵌套一套新的 flex 行为。结果往往是：
- 内部子元素不响应
flex-grow-1或flex: 1 - 内容垂直方向不拉伸（
align-items: stretch失效） - 如果内部有
height: 100%，反而因父级无明确高度而计算失败
正确做法：在 .col 的直接子元素上用 d-flex
你要伸缩排版的对象，必须是 .col 的**第一个子容器**，比如 <div class="card"> 或 <div class="content">。这个子元素才是你真正要控制布局的 flex 容器。
- ✅ 正确：
<div class="col"><div class="d-flex flex-column"><div class="flex-grow-1">...</div></div></div> - ❌ 错误：
<div class="col d-flex"><div class="flex-grow-1">...</div></div> - 若需等高拉伸，该子容器还得加
h-100（否则 flex 没高度基准）
flex-grow-1 在 .col 内部生效的前提
即使你把 d-flex 放对了位置，flex-grow-1 仍可能不工作——常见卡点是高度传递断裂：
- 父级
.col必须有高度来源（比如.row设了min-height，或自身设h-100） - 那个
d-flex子容器必须带h-100（Bootstrap 的h-100相当于height: 100%，但只对有高度约束的父级有效） - 避免同时用
gap和mb-2类——gap只对 flex/grid 容器生效，margin会叠加导致间距翻倍 - 不要在该子容器上设
height: 100vh或固定像素高，会破坏响应性
三栏中某列内实现“头部固定 + 主体自适应”伸缩
这是典型需求：比如左栏菜单固定高度，右栏内容区自动撑满剩余空间。关键不是套类，而是层级与高度链：
-
<div class="col">→ 不加任何 flex 类 -
<div class="d-flex flex-column h-100">→ 这是真正的 flex 容器，且高度继承自.col -
<div class="p-3">Header</div>→ 普通块级，不设 flex -
<div class="flex-grow-1 p-3">Main content</div>→ 自动填满剩余空间
漏掉 h-100，flex-grow-1 就没空间可长；漏掉 flex-column，主轴就是水平的，flex-grow-1 会横向拉伸而非纵向填充。
