用d-flex容器配合flex-grow-0（左右列）和flex-grow-1（中间列），结合min-width实现两侧固定、中间自适应；避免混用col-*与flex类，确保父容器为d-flex且子项同级。
用 bootstrap 5 的 container + col 实现三栏：左/右固定宽度，中间自适应
bootstrap 本身不提供“某列固定宽、其余自动撑满”的原生类，但可以用 col 配合 flex-grow-0 和 flex-grow-1 手动控制伸缩行为。关键不是靠栅格的百分比划分，而是让左右列不参与 flex 均分，中间列主动占满剩余空间。
- 左侧和右侧列加
flex-grow-0+ 显式设宽（如w-25或style="width: 200px"） - 中间列用
flex-grow-1，它会吃掉父容器剩余所有空间 - 必须确保父容器是
d-flex，否则flex-grow不生效 - 避免混用
col-*类（如col-3）和flex-grow，它们逻辑冲突：前者按栅格系统分配，后者按 flex 规则分配
为什么不用 col-2 col-8 col-2？它不能满足“两侧固定、中间自适应”
这种写法是等比划分，响应式下会随屏幕缩放一起变窄——你想要的是侧边栏始终 200px，不管窗口多宽，中间内容区才动态拉伸。一旦用 col-*，就退化成比例布局，和“固定”目标背道而驰。
-
col-2在 lg 下约 16.67%，窗口从 1200px 缩到 992px，它就从 ~200px 缩到 ~165px，不是固定 - 真正固定需脱离栅格计算体系，改走 flex 的
flex-basis控制（即显式设width或用w-*） - 若强行用
col+min-width，会破坏 Bootstrap 的断点重排逻辑，小屏下可能溢出或换行错乱
实际代码怎么写？注意 class 顺序和容器嵌套
最简可靠写法是绕过 row/col 栅格，直接用 d-flex 容器 + 子项控制。下面这个结构在所有 Bootstrap 5 版本中稳定：
<div class="d-flex"> <div class="flex-grow-0 w-25 bg-light" style="min-width: 200px;">左侧</div> <div class="flex-grow-1 bg-secondary text-white">中间（自适应）</div> <div class="flex-grow-0 w-25 bg-light" style="min-width: 200px;">右侧</div> </div>
-
w-25是兜底（比如在大屏下占 25%），min-width: 200px才是真正的固定锚点 - 三个子项必须同级、无
row包裹，否则d-flex被干扰 - 如果需要响应式隐藏某侧栏（如移动端只留中间），给对应 div 加
d-none d-lg-flex即可，别删节点
兼容性与容易踩的坑
这个方案在 IE11 上失效（flex-grow 支持不全），如果你还必须支持 IE，就得回退到 CSS Grid 或 JS 计算宽度。另外，滚动行为容易被忽略：
- 中间列内容超长时，默认不会出现横向滚动条，需加
overflow-x-auto手动启用 - 左右列如果内容高度不一致，中间列不会自动等高——要等高就得给父容器加
align-items-stretch（默认已有），但子项不能设height破坏 flex 布局 - 用
position: sticky固定侧边栏时，别把它放进flex-grow-0容器里再设top，sticky 的参照物会变成该容器而非视口
固定宽度和流式自适应混合时，边界永远在“谁控制尺寸”——要么全交给栅格，要么全交给 flex，混着来八成出事。
