不能直接在 .col 上用 position: fixed，因为它会脱离文档流、失去栅格约束、宽度归零、位置塌缩至视口左上角；正确做法是用 position: sticky（嵌套内层容器并设 top-0、父容器提供滚动上下文）或 position: fixed（需手动补全定位、宽高、右侧留白及响应式回退）。
直接给 .col-md-3 加 position: fixed 会消失或错位，不是代码写错了，是它脱离文档流后彻底失去 Bootstrap 栅格约束——宽度归零、位置塌缩到视口左上角、右侧内容直接从底下穿过。
为什么不能直接在 .col 上用 position: fixed
Bootstrap 的 .col 是 .row 的 flex 子项，依赖父容器的布局流分配宽度和位置。一旦加 position: fixed，浏览器就无视所有栅格规则，包括 md 断点、flex-grow、width 继承等。它不再参与任何响应式计算，也不再撑开父容器高度。
-
.row和.container必须保留——它们承载媒体查询逻辑，删掉会导致col-md-*在小屏下失效 - 别在
.row上套position: fixed：flex 容器会干扰 fixed 元素尺寸计算，容易偏移或缩窄 - 固定目标必须是列内部的容器，比如
<div class="sidebar-inner">，而不是列本身
用 position: sticky 实现轻量固定（推荐）
这是最符合 Bootstrap 设计逻辑的方式：不脱离文档流、自动适配响应式、无需手动腾空间。但它对父容器有硬性要求——必须有滚动上下文且无干扰属性。
- 结构上，在
.col-md-3内嵌一层<div class="sidebar-inner">，把position-sticky工具类加在这层上 - 必须设
top-0或top-3（避开 navbar），空着或写top: auto都无效 - 父容器（即
.col-md-3）要能提供滚动范围：h-100+min-height: 100vh或显式height，否则 sticky 不触发 - 避免父级有
overflow: hidden、transform、will-change——这些会创建新层叠上下文，直接禁用 sticky - iOS Safari ≤15.4 对 flex 容器内 sticky 支持不稳定，可加
min-height: 1px兜底
用 position: fixed 实现强固定（需手动缝合）
当需要侧边栏完全脱离页面滚动、始终钉在左上角时才选 fixed。它和 Bootstrap 栅格天然冲突，必须补全四要素，缺一不可。
立即学习“前端免费学习笔记（深入）”；
-
top: 0+left: 0（或 Bootstrap 的top-0 start-0），否则定位不可控 -
width: 250px（或w-25+min-width: 250px）：fixed 元素不继承列宽，100%会塌陷 -
height: 100vh（不是height: 100%）：百分比高度在 fixed 下无效 - 右侧主内容区必须加
margin-left: 250px（值 = 侧边栏实际渲染宽度），ms-md-3等工具类数值不精确，小屏下易失效 - 侧边栏内部要加
overflow-y: auto+max-height: calc(100vh - 60px)，否则长菜单溢出且无法滚动
移动端响应式回退必须显式处理
别指望 col-sm-2 + position: fixed 自动适配小屏——fixed 让它永远显示、挤占内容、误触频繁。回退不是“让它失效”，而是主动切换为普通流布局。
- 桌面端启用：
@media (min-width: 992px) { .sidebar-inner { position: sticky; top: 24px; } } - 小屏关闭：
@media (max-width: 991.98px) { .sidebar-inner { position: static; } }——必须写static，只删声明可能继承旧值 - 如果小屏改用底部抽屉，要同时重置
top: auto和left: auto，避免与bottom: 0冲突 - 移动端移除 fixed 后，务必同步清除右栏的
margin-left，否则留白卡住内容
最容易被忽略的是父容器是否触发了新层叠上下文：只要侧边栏直系父级（比如 .container-fluid）有 transform、filter 或 will-change，fixed 就会相对于那个父级定位，而不是视口——结果就是“固定”在某个区域里动不了。
