position: fixed 是唯一可靠方案；必须配 top: 0 和 left: 0、显式设宽高，右栏需手动留白，侧边栏内部需 overflow-y: auto，且须避免父容器触发新层叠上下文。
用 position: fixed 是唯一可靠方案
bootstrap 自身没有“固定侧边栏”组件，sidebar 类只是样式容器，不带定位逻辑。想让它钉在屏幕左侧不动，必须脱离文档流——position: fixed 是唯一跨浏览器稳定生效的方式。sticky-top 看似简单，但只对父容器内滚动有效，一旦页面整体滚动，它就会跟着动，不满足“始终固定”的需求。
- 固定定位必须配
top: 0和left: 0（或 Bootstrap 的top-0 start-0），否则可能偏移 - 必须显式设宽高，比如
width: 250px或w-25+vh-100，不能只靠col-md-3—— 它在fixed下完全失效 - 避免套在
.row里再加position: fixed：.row 的 flex 布局会干扰 fixed 元素的尺寸计算，容易错位
右侧内容不被遮挡的关键是留白，不是“自动避让”
fixed 元素脱离文档流，右栏不会“感知”它的存在，所以不会自动缩进。你得手动给右栏腾出空间，否则文字直接从侧边栏底下穿过去。
- 最稳妥是用
margin-left: 250px（值 = 侧边栏宽度），而不是依赖ms-md-3这类响应式工具类——它们数值不精确，且在小屏下可能失效 - 如果侧边栏宽度是百分比（如
width: 20%），右栏也得用相同比例的margin-left: 20%，保持同步 - 移动端要隐藏侧边栏时，记得同时移除右栏的
margin-left，否则白边会卡住内容
滚动行为要分清楚：侧边栏自己滚？还是主内容滚？
很多人以为“侧边栏固定”就等于“它不滚”，其实不然——如果菜单项太多，侧边栏内部也需要滚动，否则底部菜单点不到。
- 给侧边栏加
overflow-y: auto（或 Bootstrap 的overflow-auto），并确保它有明确高度（如vh-100），否则滚动条不会出现 - 主内容区滚动和侧边栏滚动互不干扰：右栏只需设
min-height: 100vh+overflow-auto，就能独立滚动 - 别在
html或body上设overflow: hidden——这会干掉整个页面滚动，主内容反而不能滑了
常见布局崩坏原因：父容器触发新层叠上下文
fixed 定位本该相对于视口，但如果父元素有 transform、perspective、filter 或 will-change，浏览器会把它当作新的定位参考系，导致侧边栏“粘”在某个区域里动不了。
- 检查侧边栏直系父级（比如
.container-fluid或.wrapper）有没有这些 CSS 属性，有就删掉 - 避免给
body加overflow-x: hidden，尤其在 iOS 上，它会让 fixed 元素定位错乱、闪动甚至消失 - viewport meta 必须存在：
<meta name="viewport" content="width=device-width, initial-scale=1">，缺了它，移动端 fixed 行为不可控
