用d-flex替代row/col才能真正固定左右栏：父容器加d-flex，左右栏用flex-grow-0+min-width:200px，中间栏用flex-grow-1，三子项同级不嵌套，避免混用col-*与flex类。
用 d-flex 替代 row/col 才能真正固定左右栏
Bootstrap 的 col-* 类本质是基于百分比的栅格划分，它不支持“左侧 200px、右侧 200px、中间自动填满”这种混合单位布局。一旦你写 col-2 col-8 col-2，三列就按比例缩放——窗口变窄时，col-2 从 ~200px 缩到 ~165px，根本不是固定。
真正可控的做法是绕过栅格计算逻辑，改用 Flexbox 布局：
- 父容器加
d-flex，确保子项进入 flex 上下文 - 左右栏加
flex-grow-0+ 显式宽度（如style="width: 200px"或w-25配min-width: 200px） - 中间栏只加
flex-grow-1，它会吃掉所有剩余空间 - 三个子元素必须同级，不能套
row或嵌套container，否则flex-grow失效
min-width 比 w-* 更可靠
w-25 这类工具类只是设置 width: 25%，在大屏下可能撑得太宽；而 min-width: 200px 才是锚定“固定”的关键。实际项目中建议两者共存：
- 左侧：
class="flex-grow-0 w-25" style="min-width: 200px;" - 右侧同理，
w-25是兜底（比如在超大屏下不至于太窄），min-width是硬约束 - 别依赖
max-width控制左右栏——它不影响 flex 分配逻辑，反而可能让内容溢出
移动端响应式隐藏某侧栏要小心 d-none 的作用时机
如果想在小屏下只保留中间栏，给左右栏加 d-none d-lg-flex 是常见做法。但要注意：
-
d-none必须放在前面，否则在某些 Bootstrap 版本中会被后面的d-lg-flex覆盖 - 不要删 DOM 节点——动态增删会影响 Vue/React 组件状态或 JS 初始化逻辑
- 若使用
offcanvas替代固定侧栏，记得把触发按钮放进.navbar内，否则小屏下可能被遮挡
IE11 不支持 flex-grow，得换方案
如果你仍需兼容 IE11，flex-grow-1 会完全失效。这时候只能回退：
- 用 CSS Grid：
grid-template-columns: 200px 1fr 200px，IE11 支持部分 Grid 语法（需加-ms-前缀） - 或用 JS 动态计算中间宽度：
calc(100vw - 400px)，但要注意vw包含滚动条宽度，可能有 1–2px 偏差 - 更稳妥的是彻底放弃 IE11，Bootstrap 5 官方已停止对其支持
真正的难点不在写法，而在边界归属：固定宽度和自适应空间之间那条线，必须由同一个布局引擎（flex 或 grid）统一控制。混用 col-* 和 flex-grow，等于让两个系统打架，结果一定是其中一方被覆盖或错位。
