不能用col-2 col-8 col-2实现固定宽度，因为col-*类本质是百分比划分：1200px屏下col-2约200px，缩至992px只剩~165px；真正固定需脱离栅格、用d-flex+flex-grow-0+min-width:200px组合。
为什么不能用 col-2 col-8 col-2 实现固定宽度
因为 col-* 类本质是百分比划分：在 1200px 屏幕下 col-2 约 200px，缩到 992px 就只剩 ~165px——它随断点变化，不是像素级固定。你想要的“左侧始终 200px、右侧始终 250px”，必须脱离栅格计算链，否则小屏下侧栏塌缩、内容错位。
d-flex 容器里左右栏怎么设固定宽又不撑开
左右栏必须同时满足两个条件：不参与 flex 分配 + 锚定像素宽度。只加 flex-grow-0 不够，没显式 width 时浏览器可能按内容收缩；只写 width: 200px 又可能在超大屏下过窄。推荐组合：
-
flex-grow-0阻止伸缩 -
min-width: 200px设硬下限（比w-25更可靠） - 可选
max-width: 200px或内联style="width: 200px"锁死 - 中间栏只用
flex-grow-1，不设 width，让它吃掉剩余空间
响应式隐藏侧栏时 d-none 顺序为什么重要
Bootstrap 的显示类按顺序覆盖：d-lg-flex 会让元素在 ≥992px 显示，但若写成 d-lg-flex d-none，d-none 会失效——必须把 d-none 放前面，如 d-none d-lg-flex，才能确保小屏下彻底隐藏。另外，别把侧栏塞进 offcanvas 内部：offcanvas 依赖绝对定位，嵌套在 d-flex 里会导致 transform 失效、遮罩不出现。
IE11 兼容性问题怎么绕过去
flex-grow 在 IE11 完全不生效，这时只能换方案：
- 用 CSS Grid：
grid-template-columns: 200px 1fr 250px，加-ms-grid-columns前缀支持 IE - 或退回到 JS 计算：
style="width: calc(100vw - 450px)"，但注意vw包含滚动条宽度，可能有 1–2px 偏差 - 更实际的做法：确认项目是否真需支持 IE11——Bootstrap 5 已官方停止维护，多数现代项目可直接放弃
真正容易被忽略的是边界归属：固定宽度和自适应空间必须由同一个布局引擎（flex 或 grid）统一控制。混用 col-* 和 flex-grow，等于让两个系统打架，结果不是中间栏忽宽忽窄，就是侧栏莫名塌缩。
