用bootstrap 5的offcanvas组件最稳妥，需将容器设为body直接子级、添加offcanvas-end类、data-bs-backdrop="true"，它自动实现右侧滑入和半透明遮罩。
点击按钮后侧边栏从右滑入，同时背景变暗怎么办
直接用 Bootstrap 5 的 offcanvas 组件最稳妥，不用自己写 CSS 动画或 JS 控制遮罩层。它原生支持 backdrop、backdrop click 关闭、键盘 ESC 关闭，且自动适配移动端断点。
关键点是：必须把 offcanvas 放在 直接子级（不能嵌套在 container 或 row 里），否则 backdrop 不会全屏覆盖；同时要显式设置 data-bs-backdrop="true" 和 data-bs-keyboard="true"。
-
offcanvas默认从左侧滑入，右侧需加class="offcanvas-end" - 遮罩背景色由 Bootstrap 的
--bs-offcanvas-backdrop-bgCSS 变量控制，默认是rgba(0, 0, 0, 0.5)，可覆盖 - 如果页面已有滚动条，
offcanvas打开时 body 会自动加overflow-hidden，关闭后恢复——这个行为不可禁用，否则 backdrop 点击可能失效
如何让侧边栏只在小屏显示，大屏固定显示为常规 sidebar
Bootstrap 的响应式工具类可以直接控制显隐，但要注意：不能只靠 d-none d-lg-block 控制 offcanvas 本身，因为它的触发按钮和 backdrop 都需要同步隐藏/显示。
推荐做法是用两套结构：一套用于小屏的 offcanvas + 触发按钮，一套用于大屏的常驻 col-lg-3 栅格 sidebar。用 d-lg-none 隐藏小屏结构，d-none d-lg-block 显示大屏结构。
- 触发按钮（如 hamburger）必须加
d-lg-none，否则大屏也会显示 - 大屏 sidebar 的宽度建议用
col-lg-3或col-xl-2，避免和offcanvas的 width 冲突（后者默认 300px，可通过style="--bs-offcanvas-width: 400px"调整） - 别给大屏 sidebar 加
position: fixed，否则在小屏下可能残留定位影响offcanvas布局
点击遮罩层不关闭侧边栏？常见原因有哪些
最常见的是 offcanvas DOM 位置不对：如果它被包裹在 div class="container" 或其他有 overflow: hidden 的父容器里，backdrop 就无法渲染到整个 viewport，点击自然无效。
- 检查浏览器开发者工具中，
.offcanvas-backdrop元素是否真实存在且高度/宽度为100vh/100vw - 确认没手动移除
data-bs-backdrop属性，或没在 JS 中调用offcanvas.show()时传入{ backdrop: false } - 若用了第三方滚动库（如
smooth-scrollbar），它会劫持body的 overflow，导致 backdrop 点击事件穿透——此时需监听shown.bs.offcanvas事件，手动禁用滚动库
自定义动画时间或 easing 效果怎么改
Bootstrap 5 的 offcanvas 动画由 CSS transition 控制，修改 --bs-offcanvas-transition-time 和 --bs-offcanvas-transition-timing-function 两个 CSS 变量即可，无需 JS。
例如在 或全局样式中：
:root {
--bs-offcanvas-transition-time: 0.4s;
--bs-offcanvas-transition-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
}
- 过渡时间不能设为 0，否则 backdrop 会闪现而非渐变
- easing 函数推荐用
cubic-bezier，避免用ease-in-out这类关键词——某些版本 Bootstrap 会覆盖掉 - 如果想关掉动画只做“显示/隐藏”，可用
class="offcanvas offcanvas-end show"+ JS 切换show类，但 backdrop 淡入淡出会丢失
offcanvas 的 DOM 位置和 backdrop 的 z-index 层级冲突——尤其当页面用了 modal 或 toast 组件时，得确保 .offcanvas-backdrop 的 z-index 高于它们。
