直接给.col-md-3加position:fixed不行，因其脱离文档流后失去.flex子项约束，导致宽度归零、位置塌缩至左上角，右侧内容穿透显示；正确做法是固定其内部容器（如.sidebar-inner），并显式设置宽高、右侧留白及响应式回退。
直接给 .col-md-3 加 position: fixed 为什么不行
它会脱离文档流，.col 原本依赖 .row 的 flex 布局来分配宽度和位置；一旦加 position: fixed，浏览器就无视栅格规则，导致侧边栏缩成一条线、卡在左上角，右侧内容直接从它底下穿过——不是没生效，是布局逻辑被绕过了。
真正该加 position: fixed 的，是 .col 内部的容器（比如 <div class="sidebar-inner">），而不是列本身。<ul>
<li>
<code>.row 和 .container 必须保留，否则 md 等断点失效
.row 上套 position: fixed：flex 容器会干扰 fixed 元素的尺寸计算，容易错位width: 250px + height: 100vh，100% 会塌陷
flex: 0 0 240px 是怎么锁死侧边栏宽度的
Flex 容器里，width: 240px 只是“建议值”，真正起效的是弹性行为。默认 flex-shrink: 1，只要父容器不够宽，它就会主动压缩——哪怕你写了 width，也拦不住。
flex: 0 0 240px 是简写，等价于：flex-grow: 0（不放大）、flex-shrink: 0（不缩小）、flex-basis: 240px（基准宽度）。这才是真正关掉收缩权的方式。
- 别只写
flex: 0 240px：浏览器会把240px当成flex-shrink值，结果变成flex-shrink: 240，压得更狠 - IE11 需同时声明
width: 240px和flex-basis: 240px，否则 fallback 失效 - 如果侧边栏内有长文本或图片，记得加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis防撑宽
右侧主内容区为什么滚动不了，或者被遮挡
fixed 元素完全脱离文档流，右栏不会“感知”它的存在，也不会自动避让。你得手动腾出空间，否则文字直接从侧边栏底下穿过去。
- 右侧内容必须加
margin-left: 250px（值 = 侧边栏实际宽度），不能靠ms-md-3这类响应式工具类——它们数值不精确，小屏下可能失效 - 如果用了百分比宽度（如
width: 20%），右栏也要用相同比例的margin-left: 20%，保持同步 - 右栏加了
overflow-y: auto却没滚动条？大概率是高度没被约束住——给它加min-height: 0或height: calc(100vh - 60px)，让浏览器知道“多高才算溢出”
移动端和响应式断点下最容易崩坏的地方
桌面端看着正常，一缩到手机就错乱，问题往往出在响应式处理方式上：
- 别指望
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才能盖住
最常被忽略的是：fixed 后侧边栏高度不再撑开父容器，如果 JS 锚点滚动依赖 offsetHeight，就得换成 window.innerHeight。
