Bootstrap 4 无法用 sticky-top 实现侧边抽屉，因其仅支持垂直 sticky、不兼容 left/right 且依赖父容器定位上下文；必须用 position: fixed + transform: translateX() 实现滑入滑出，并配合 JS 控制状态与主内容区 margin-left 推移。
Bootstrap 4 没有内置的抽屉式侧边栏组件，offcanvas 是 Bootstrap 5.2+ 才加入的特性，所以必须手动用 CSS + JS 实现；靠 sticky-top 或纯响应式栅格（如 col-md-3 d-none d-md-block）无法达成“滑入/滑出”交互效果。
为什么不能用 sticky-top 或 position: sticky 做侧边抽屉
sticky-top 在 Bootstrap 4 中仅对垂直方向（top）生效，浏览器对 left / right 的 position: sticky 支持极差，且它依赖父容器有定位上下文——而 Bootstrap 4 的 .row 默认是 flex 容器，不提供锚点，导致加了也无效。
常见错误现象：col-3 加 sticky-top 后侧边栏仍随页面滚动；或强行加 left: 0 却消失不见。
- 别把
sticky-top放在.col-*上，它只适用于顶部导航等文档流顶部元素 - 确认你用的是 Bootstrap 4.0+（
sticky-top从 4.0.0 引入），但它根本不是为侧边栏设计的 - 侧边抽屉必须脱离文档流，
position: fixed是唯一可靠起点
用 transform: translateX() 实现平滑滑动
比起 left 动画，transform 性能更好、不触发重排、兼容性稳定，尤其适合移动端。关键是要控制两个状态：隐藏时完全移出视口，显示时归位。
立即学习“前端免费学习笔记（深入）”；
- 抽屉容器必须设
position: fixed、top: 0、height: 100vh、width: 280px（按需调整） - 用固定像素值做位移，比如
transform: translateX(-280px)，避免translateX(-100%)因 padding 或 box-sizing 导致偏移 - 动画只写
transform和opacity，禁用left、margin、width等会触发 layout 的属性 - 加
backface-visibility: hidden防 iOS 闪烁；开发期可加will-change: transform，上线前建议改用transform: translateZ(0)
示例核心样式：
.sidebar-drawer {
position: fixed;
top: 0;
height: 100vh;
width: 280px;
transform: translateX(-280px);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backface-visibility: hidden;
}
.sidebar-drawer.show {
transform: translateX(0);
}
主内容区怎么配合不被遮挡
抽屉用 position: fixed 后脱离文档流，主内容不会自动让位——必须显式处理，否则抽屉会盖住内容但用户点不到。
- 不要给主内容区加
padding-left，它不阻止内容溢出，还影响栅格计算；应使用margin-left: 280px推开 - 移动端断点（如
@media (max-width: 768px)）中，需移除margin-left和position: fixed，还原为流式布局 - 若页面有
.navbar.fixed-top（高 56px），抽屉的top应设为56px，避免重叠 - 父容器（如
.layout-container）需加overflow: hidden和position: relative，确保transform坐标系稳定；别直接对body设overflow: hidden，否则 iOS Safari 会锁死页面滚动
JS 控制开关与状态保持
CSS 无法持久记住展开/折叠状态，:hover 只响应悬停，@media 只响应屏幕尺寸，必须靠 JS 切换 class 并存状态。
- 绑定按钮 click 事件，切换
.sidebar-drawer.show和主内容区的margin-left - 用
sessionStorage存储状态，刷新后恢复上次操作结果，例如：sessionStorage.setItem('sidebarOpen', 'true') - 避免直接操作
element.style.transform，统一用 class 控制，便于维护和动画复用 - 如果页面同时存在顶部
.navbar和侧边抽屉，注意 z-index 层叠顺序：抽屉通常需要比 navbar 更高，但低于 toast 或 modal
真正容易被忽略的是：抽屉容器必须放在 <body> 直接子级，不能嵌套在 transform 或 position: fixed 的父元素里，否则定位坐标系错乱，滑动位置偏移。
