position: fixed是唯一跨浏览器稳定实现侧边栏固定的方式；需设top: 0、left: 0、width: 250px、height: 100vh，主内容区配margin-left: 250px，并加overflow-y: auto和max-height确保滚动。
直接用 position: fixed 是唯一跨浏览器稳定生效的方式，sticky-top 或 position: sticky 在侧边栏场景下基本不可靠——不是写法错，是浏览器对水平方向粘性定位支持差，且 Bootstrap 的 .row（flex 容器）会直接让 sticky 失效。
为什么 sticky-top 加在 .col-md-3 上没反应
因为 sticky-top 只响应 top 偏移，不处理 left；它依赖 position: sticky，而该属性在 flex 子项（即 .col）中触发条件苛刻：父容器不能有 overflow: hidden 或 transform，且必须显式设 left 值——但 iOS Safari 15.4 前根本不认 left: 0。
常见现象：.col-md-3 加了 sticky-top 后，侧边栏仍随页面滚动；强行加 left: 0 则整个元素消失或卡在左上角。
- 别把
sticky-top放在.col上，它只适用于顶部导航等文档流顶部元素 -
.row默认是display: flex，不提供 sticky 锚定所需的定位上下文 - 即使你用了
@supports (position: sticky)，iOS 真机测试大概率失败，模拟器会误判
position: fixed 必须手动补全的四要素
固定定位会让侧边栏脱离文档流，主内容区不会自动让位。漏掉任意一项，就会塌缩、遮挡、滚动失灵。
-
top: 0或top-0（若页面有.navbar，需设为top: 56px避免重叠） -
left: 0或start-0，锚定左侧起点 -
width: 250px（不能靠col-md-3继承，fixed元素宽度归零） -
height: 100vh（height: 100%会塌陷，因父容器无高度约束）
同时，侧边栏内部容器必须加 overflow-y: auto 和 max-height: calc(100vh - 2rem)，否则长菜单无法滚动或溢出视口。
主内容区怎么避免被遮挡或穿透
position: fixed 不会通知右侧内容“我在这”，所以必须显式留白。
- 主内容区加
margin-left: 250px（值必须严格等于侧边栏宽度），禁用padding-left——它不阻止内容溢出，还干扰栅格计算 - 不要用
ms-md-3这类响应式工具类替代，它们数值不精确，小屏下易失效 - 如果侧边栏宽度是百分比（如
width: 20%），右栏也要用相同比例的margin-left: 20% - 右栏若要独立滚动，需设
min-height: 0或height: calc(100vh - 60px)，否则overflow-y: auto不生效
移动端和响应式断点最容易崩坏的地方
桌面端跑通不代表上线没问题。90% 的错位、遮挡、滚动卡死，都出在断点处理和层叠顺序上。
- 在
@media (max-width: 768px)下，应移除position: fixed，还原为普通块级元素，并同步清除右栏的margin-left - 检查侧边栏直系父级是否含
transform、will-change、filter——这些会创建新层叠上下文，使fixed定位基准变为该容器而非视口 -
z-index推荐设为1020：比.navbar（z-index: 1000）高，比.modal-backdrop（z-index: 1030）低，避免覆盖弹窗 - 别把侧边栏塞进
.offcanvas或.navbar内部——它们自带transform，会直接废掉fixed行为
真正容易被忽略的是：侧边栏内部容器的高度控制与滚动边界。很多布局在桌面端看着正常，一拉滚动条就发现菜单底部点不到——那是因为忘了给 .sidebar-inner 设 max-height 和 overflow-y: auto，而不是宽度或 z-index 没配对。
