必须用flexbox而非col-*类实现：父容器d-flex，左右栏flex-grow-1均分剩余空间，中间栏width: 450px+flex-shrink-0固定宽度，三子项同级不嵌套，避免混用栅格与flex类。
不能靠 col-* 类直接实现“两侧自适应、中间固定宽度”——bootstrap 栅格系统天生是比例分配，不是剩余空间分配。你要的是中间栏始终 450px，左右栏吃掉剩余空间并随屏幕缩放，这必须用 flexbox 控制流，而不是栅格断点。
为什么 col-md-2 col-md-8 col-md-2 不行
它把容器按百分比分成三份，col-md-8 在 1200px 宽度下约 800px，但窗口缩到 992px 时就只剩 ~660px，根本不是“固定”。你想要的 450px 是硬约束，和屏幕无关。一旦混用 col-* 和 flex-grow，两个布局引擎打架，结果是中间栏忽宽忽窄甚至塌缩。
正确做法：d-flex + flex-grow-0 + width
父容器用 d-flex 进入 Flex 上下文，左右栏设 flex-grow-0 并显式写死 width（或 min-width），中间栏只加 flex-grow-1 ——但它不会“固定”，所以得反着来：中间栏设 width: 450px + flex-shrink-0，左右栏用 flex-grow-1 吃剩余空间。
- 中间栏必须同时有
flex-shrink-0和width: 450px，否则小屏下会被压缩 - 左右栏不能设
width，否则会挤占中间栏；只靠flex-grow-1让它们均分剩余空间 - 整个结构必须扁平：三个子
div直接在d-flex下，别套row或container - 响应式隐藏侧栏？给左右栏加
d-none d-lg-flex，注意d-none要写在前面
移动端适配与 offcanvas 冲突点
如果小屏下想把侧栏收进 offcanvas，别把 offcanvas 嵌在 d-flex 内部——它依赖绝对定位，嵌套后 transform 失效、遮罩不出现。正确位置是和 d-flex 同级，放在 .container-fluid 下。触发按钮要放进 .navbar，否则可能被 fixed 导航栏盖住。
-
offcanvas宽度只能用 CSS 变量控制：style="--bs-offcanvas-width: 280px;" - 别给
offcanvas加float、position: relative或自定义width，会破坏内部定位逻辑 - 关闭按钮必须是原生写法：
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>，手写×会丢键盘支持
IE11 兼容性陷阱
Flexbox 的 flex-grow 和 flex-shrink 在 IE11 下表现不稳定，flex-shrink: 0 可能被忽略。如果必须兼容，改用 CSS Grid：
.layout {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 450px 1fr;
grid-template-columns: 1fr 450px 1fr;
}
注意：Grid 方案里中间栏的 450px 是绝对值，左右用 1fr 表示等分剩余空间，且 IE11 支持带 -ms- 前缀的 grid-template-columns。真正难的不是写哪一行，而是确保所有宽度控制都出自同一个引擎——要么全 Flex，要么全 Grid，混用必崩。
