sticky-top 对侧边栏无效，因其仅支持垂直粘性定位且浏览器对水平 sticky 支持差；侧边栏固定必须用 position: fixed 配合 js 控制 class 切换实现伸缩，并注意 z-index 与层叠上下文。
position: fixed 是唯一可靠路径，sticky-top 在 Bootstrap 4 中仅适用于顶部导航，对侧边栏无效；伸缩控制必须靠 JS 驱动 class 切换，不能仅靠 CSS 媒体查询。
为什么 sticky-top 对侧边栏不起作用
Bootstrap 4 的 sticky-top 类只作用于垂直方向的粘性定位（top 偏移），它依赖 position: sticky，而该属性在水平方向（left / right）上浏览器支持极差，且 Bootstrap 4 栅格列（如 .col-3）默认是 flex 项目，父容器 .row 没有定位上下文，sticky 无法锚定到视口左边界。
常见错误现象：给 .col-3 加 sticky-top 后，侧边栏随页面滚动、不固定；或加了 left: 0 却完全消失——因为 sticky 不响应 left 声明。
- 别试图用
sticky-top+left: 0组合实现侧边固定 - 不要把
sticky-top放在.row内部任意.col-*上，它只应在文档流顶部元素中使用 - 确认你用的是 Bootstrap 4.0+（
sticky-top从 4.0.0 开始引入），但即便如此，它也不适配侧边场景
position: fixed 必须手动控制尺寸与留白
固定定位会让侧边栏脱离文档流，主内容区会“塌陷”到左上角。必须显式设定侧边栏宽高，并为主要内容区预留空间。
实操建议：
- 侧边栏加
position-fixed类（Bootstrap 4 内置），再补全：top: 0、left: 0、height: 100vh、width: 250px（值按需调整） - 主内容区用
margin-left: 250px推开，而非padding-left——后者不阻止内容溢出，且影响内部栅格计算 - 移动端断点（如
@media (max-width: 768px)）中，移除position-fixed和margin-left，还原为普通.col流式布局 - 若页面有
.navbar，需设top: 56px（假设 navbar 高 56px），避免重叠
伸缩逻辑只能靠 JS 控制 class，CSS 无解
CSS 本身无法根据用户点击动态切换宽度（比如从 250px 缩为 60px），:hover 只能做悬停反馈，无法持久记忆状态；@media 只响应屏幕尺寸，不响应交互。
正确做法是用 JS 切换两个预设 class：
- 定义
.sidebar-collapsed：width: 60px、隐藏文字（overflow: hidden）、保留图标 - 定义
.sidebar-expanded：width: 250px、正常显示文字和子菜单 - 绑定按钮 click 事件，切换这两个 class，并同步修改主内容区的
margin-left - 将展开/折叠状态存入
sessionStorage，刷新后保持上次状态
示例关键 CSS：
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
background: #212529;
transition: width 0.3s ease;
}
.sidebar-collapsed {
width: 60px;
}
.sidebar-expanded {
width: 250px;
}
.main-content {
margin-left: 250px;
transition: margin-left 0.3s ease;
}
z-index 和层叠上下文是隐形杀手
侧边栏加了 position: fixed 却“看不见”，大概率是被其他元素盖住，或因父容器触发了新层叠上下文。
排查重点：
- 检查侧边栏是否嵌套在
.offcanvas、.navbar或任何含transform、opacity 、<code>filter的容器里——这些都会创建新层叠上下文，使fixed定位基准变为该容器而非视口 - 确保侧边栏直接挂载在
下，或至少是<div class="container"> 外层 <li> <code>z-index设为1020（高于.navbar的1000，低于.modal-backdrop的1030），避免硬写9999 - 主内容区若用了
position: relative，必须明确设z-index: 1以下值，否则会形成独立层叠上下文，干扰 sidebar 覆盖
最易被忽略的一点：伸缩动画中，width 变化必须配合 transition，且不能对 display 或 visibility 做动画——它们不触发重排，会导致视觉卡顿或跳变。
