position: fixed 是唯一稳定方案，但需手动控制宽高、锚点和右侧留白；左侧须独立于栅格布局并显式设宽，右侧需用精确 margin-left 预留空间，移动端应改用 offcanvas。
直接用 position: fixed 是唯一稳定方案，但必须手动控制宽高、锚点和右侧留白，否则菜单塌缩到左上角、内容被遮盖、滚动条不出现——这不是 Bootstrap 不支持，而是 fixed 元素天然脱离栅格流。
左侧容器不能套 .col-* 类
Bootstrap 的 .col-md-2 本质是 flex 子项，加 position: fixed 后立即脱离文档流，宽度归零、位置失控，右侧内容会直接从它底下穿过。常见错误写法：
<div class="row"> <div class="col-md-2 position-fixed"></div> <div class="col-md-10"></div> </div>
正确做法是把左侧单独拎出来，不参与栅格布局：
- 左侧用独立
<div class="sidebar">，加 <code>position-fixed start-0 top-0 h-100 - 显式设宽：
style="width: 260px;"或w-25+min-width: 260px - 内部菜单若超长，加
overflow-y-auto并确保父级有高度（h-100生效需外层无 padding 干扰） - 推荐用
style="margin-left: 260px;"，值必须和左侧实际宽度严格一致 - 如果页面顶部有
.navbar（默认高 56px），左侧要加top: 56px，右侧 margin 不用调，但高度计算得减去它 - 避免在右侧最外层用
.container：它带max-width和padding，会干扰 margin-left 的对齐效果 - 右侧最外层容器必须设
style="height: calc(100vh - 56px); overflow-y: auto;" - 若父级是
，确认html, body { height: 100%; }已设置，否则100vh计算失准 - 别把
overflow-y: auto加在或<main></main>上——会导致整页双滚动条，或固定菜单被卷走 - 桌面端用 fixed 布局；移动端改用
<div class="offcanvas offcanvas-start d-xl-none"> <li>offcanvas 宽度统一用 CSS 变量：<code>style="--bs-offcanvas-width: 260px;" - 触发按钮加
d-xl-none，放在 navbar 内，避免被 sticky 元素盖住 - 切记：offcanvas 激活时，要 JS 清除右侧的
margin-left，否则内容左边会空出一块白边
右侧内容必须手动预留左侧空间
position: fixed 的元素不会“推”开其他内容，右侧不会自动感知它的存在。只靠 .col-md-10 或 ms-md-3 不够精确，尤其在非标准断点下容易错位。
右侧滚动失效？先查高度有没有被约束
overflow-y: auto 在右侧不生效，90% 是因为没给容器设明确高度。浏览器不知道“多高才算溢出”，flex-grow 或百分比高度都不够。
移动端必须切换为 offcanvas，不能只靠 d-none d-lg-block
小屏下保留一个 260px 宽的 position: fixed 侧边栏，会严重挤压内容、遮挡顶部导航、破坏屏幕阅读器焦点流。
最容易被忽略的是层叠上下文问题：如果左侧容器父级有 transform、filter 或 will-change，position: fixed 会相对它定位，而不是视口——结果菜单卡在某个区域不动。检查直系父级样式，必要时加 z-index: 1150 避免被 navbar（z=1030）或 offcanvas（z=1140）压住。
