bootstrap侧边抽屉导航需满足三个硬性前提：offcanvas必须为body直接子元素、触发按钮与抽屉id严格匹配、抽屉容器须含offcanvas/offcanvas-start/tabindex="-1"/aria-labelledby；内容滚动需设.offcanvas-body的max-height和overflow-y: auto。
用 HTML 结合 Bootstrap 制作侧边抽屉导航，核心是正确使用 offcanvas 组件的结构、属性和约束条件。它不是靠写 CSS 动画实现的，而是依赖 Bootstrap 内置 JS 控制类切换与 DOM 插入逻辑。只要结构对、属性配对、挂载位置合规，就能零 JS 代码启用滑动效果。
必须满足的三个硬性前提
缺一不可，否则点击无反应、遮罩不出现、方向错乱或关闭失效：
-
offcanvas 元素必须是
的直接子元素——不能嵌套在<main></main>、<div class="container"> 或任何带 <code>overflow: hidden、transform、position: relative的父容器里；否则 backdrop 插入错位、 ESC 失效、滚动锁残留 -
触发按钮与目标抽屉的 ID 必须严格一致：按钮写
data-bs-target="#nav"，抽屉就得有id="nav"（大小写、连字符、空格全要匹配），浏览器开发者工具里可快速验证 -
抽屉容器必须同时具备三个基础属性：
class="offcanvas offcanvas-start"（方向类不能省）、tabindex="-1"（保障键盘可访问性）、aria-labelledby（推荐指向标题 ID，如aria-labelledby="navLabel"） - 给
.offcanvas-body加 CSS：max-height: calc(100vh - 56px); overflow-y: auto;（56px 是常见 header 高度，按实际调整） - 移动端 Safari 建议用
100dvh替代100vh，避免地址栏收起时高度跳变：max-height: calc(100dvh - 56px); - 确保父级
.offcanvas没设height或overflow: hidden，否则会截断或禁用滚动 - 左滑：
offcanvas-start（LTR 页面下从左进，RTL 下自动反向） - 右滑：
offcanvas-end（适合操作面板、客服入口） - 顶部/底部：
offcanvas-top或offcanvas-bottom - 响应式隐藏：加
offcanvas-lg表示仅在lg及以上断点显示抽屉；加offcanvas-sm表示仅在sm及以下显示
左侧滑出菜单的标准 HTML 结构
这是最常用、最稳妥的写法（Bootstrap 5.2+ 官方推荐）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
让内容可滚动的关键设置
默认情况下，offcanvas-body 会随内容撑高，导致底部按钮被顶出视口、滚动条不出现在抽屉内。解决方法是显式限制高度并启用纵向滚动：
方向控制与响应式适配
方向由 class 决定，不是 data-bs-placement（该属性在 offcanvas 中无效，属 Tooltip/Popover）：
