不能直接用bootstrap的col-类实现左侧固定，因为col-基于百分比栅格，会随屏幕缩放（如col-2在lg下从200px缩至165px），违背“固定200px”目标；真正固定需脱离栅格、改用d-flex容器+flex-grow-0+显式width/min-width控制。
为什么不能直接用 Bootstrap 的 col-* 类实现左侧固定
因为 col-* 是基于百分比的栅格系统，它会随屏幕宽度缩放。比如 col-2 在 lg 断点下约 16.67%，窗口从 1200px 缩到 992px，宽度就从 ~200px 缩到 ~165px——这和“固定 200px”目标冲突。真正固定需脱离栅格计算，改走 Flexbox 的 flex-basis 控制逻辑。
d-flex 容器 + flex-grow-0 + 显式宽度才是可靠组合
必须确保父容器是 d-flex，子项同级、无 .row 包裹（否则 flex 属性被干扰）。左右栏加 flex-grow-0 并设 min-width 或内联 style="width: 200px"；中间栏用 flex-grow-1 吃掉剩余空间。
-
w-25这类类只是兜底（大屏下占 25%），min-width: 200px才是真正的固定锚点 - 三个子项必须平级，不能嵌套在
.row里——.row默认是display: flex，但自带margin和min-height，会破坏高度约束 - 如果需要响应式隐藏某侧栏（如移动端只留中间），给对应
div加d-none d-lg-flex，别删节点
右侧滚动失效？大概率是高度没被约束住
overflow-y: auto 在右侧不生效，典型现象是滚动条一闪而过、内容全挤在顶部、或整个页面纵向滚动而非仅右侧。根本原因是浏览器不知道“多高才算溢出”——flex-grow-1 只负责分配空间，不自动设高度。
- 右侧区域必须显式设高，如
style="height: calc(100vh - 56px)"（减去.navbar高度） - 若父容器是
body，需确保html, body { height: 100% }，否则100vh计算失准 - 避免在右侧内部再用
.container（带max-width），建议换.container-fluid或手动设width: 100vw
移动端适配：别指望 col-sm-* 自动收起固定栏
固定定位在小屏下体验极差，且 position: fixed 不响应 Bootstrap 的断点规则。col-sm-2 + fixed 组合只会让侧栏永远显示、强行遮挡导航栏。
- 在
@media (max-width: 768px)下，把左侧position改回static，并设display: none - 右侧取消
margin-left，恢复为width: 100% - 更稳妥的做法是用 Bootstrap 5 的
offcanvas替代：左侧内容放进<div class="offcanvas offcanvas-start">，触发按钮放在顶部导航里<p>最易被忽略的是边界归属问题：固定宽度和流式自适应混合时，“谁控制尺寸”必须清晰。要么全交给栅格，要么全交给 flex，混着来必然错乱。另外，IE11 不支持 <code>flex-grow，如果仍需兼容，得回退到 CSS Grid 或 JS 动态计算宽度。
