直接用position-fixed是最稳妥方案，但必须配合top/left、显式宽高和右侧margin-left留白，否则侧边栏塌缩至左上角、遮挡内容、内部滚动失效；不能直接给.col-md-3加该类，因其作为flex子项脱离文档流后失去栅格约束，导致宽度归零、位置丢失、右侧内容穿透显示。
直接用 position-fixed 是最稳妥的方案，但必须配合 top、left、显式宽高和右侧留白，否则侧边栏会塌缩到左上角、遮挡内容、滚动失效。
为什么不能直接给 .col-md-3 加 position-fixed
Bootstrap 的 .col 是 flex 子项，依赖 .row 的布局流；一旦加 position-fixed，它就脱离文档流，不再受栅格约束。结果是：宽度归零、位置丢失（常卡在视口左上角）、右侧内容直接从它底下穿过——不是没生效，而是布局逻辑被彻底绕过了。
- 固定目标必须是侧边栏内部的容器（如
<div class="sidebar-inner">），而不是 <code>.col本身 -
.row和.container必须保留，否则响应式断点（如md）会失效 - 别在
.row上套position-fixed：flex 容器会干扰 fixed 元素的尺寸计算，容易错位 -
top: 0或 Bootstrap 的top-0，left: 0或start-0：锚定起始位置，否则默认偏移不可控 -
width: 250px（或w-25+min-width: 250px）：fixed 元素不继承父列宽度，必须显式设宽 -
height: 100vh或vh-100：用100%会塌陷，100vh才能撑满视口高度 - 右侧主内容区必须加
margin-left: 250px（值 = 侧边栏实际宽度）：fixed 不会自动避让，右栏不会“感知”它的存在 - 侧边栏内部加
overflow-y: auto（或overflow-auto）：否则长菜单无法滚动，底部项点不到 - 别指望
col-sm-2+position-fixed自动适配小屏——fixed 让它永远显示且无视栅格规则 - 在
@media (max-width: 768px)下，应把侧边栏position改回static，并设display: none；同时清除右栏的margin-left - 如果用了 Bootstrap 5 的
offcanvas或navbar，注意它们自带transform，会创建新层叠上下文，导致position-fixed相对它定位而非视口——检查直系父级是否含transform、will-change、filter -
z-index冲突很隐蔽：默认navbar是 1030，offcanvas是 1140，侧边栏至少设为z-index: 1150才能盖住 - 确保右栏容器有明确高度约束，比如
min-height: calc(100vh - 56px)（减去 navbar 高度） - 避免在
html或body上设overflow: hidden——这会干掉整个页面滚动，右栏反而不能滑 - 如果右栏嵌在
.row里，记得加m-0清除默认 margin；.container-fluid要加p-0，否则 padding 会让 fixed 元素偏移
用 position-fixed 实现左侧固定 + 右侧滚动的关键参数
核心不是“加 fixed”，而是“加在哪、怎么补空缺”。下面这些值一个都不能少，且要互相匹配：
移动端和响应式断点下的常见崩坏点
很多布局在桌面端看着正常，一缩到手机就错乱，问题往往出在响应式处理方式上：
右侧内容滚动不生效？先查这三处
右栏加了 overflow-y: auto 却没滚动条，大概率是高度没被约束住，浏览器不知道“多高才算溢出”：
真正麻烦的从来不是加 fixed，而是它脱离文档流后，所有原本由栅格自动处理的留白、对齐、高度继承，都得手动补全——漏掉任意一环，布局就垮半边。
