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 元素必须是
<body>的直接子元素——不能嵌套在<main>、<div class="container">或任何带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"）
左侧滑出菜单的标准 HTML 结构
这是最常用、最稳妥的写法（Bootstrap 5.2+ 官方推荐）：
<!-- 触发按钮 -->
<button type="button" class="btn btn-primary"
data-bs-toggle="offcanvas"
data-bs-target="#sidebar"
aria-controls="sidebar">菜单</button>
<!-- 抽屉容器（放在 <body> 最外层）-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar"
aria-labelledby="sidebarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarLabel">导航</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<a href="#" class="list-group-item">首页</a>
<a href="#" class="list-group-item">产品</a>
<a href="#" class="list-group-item">关于</a>
</div>
</div>
立即学习“前端免费学习笔记（深入）”；
让内容可滚动的关键设置
默认情况下，offcanvas-body 会随内容撑高，导致底部按钮被顶出视口、滚动条不出现在抽屉内。解决方法是显式限制高度并启用纵向滚动：
- 给
.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，否则会截断或禁用滚动
方向控制与响应式适配
方向由 class 决定，不是 data-bs-placement（该属性在 offcanvas 中无效，属 Tooltip/Popover）：
- 左滑：
offcanvas-start（LTR 页面下从左进，RTL 下自动反向） - 右滑：
offcanvas-end（适合操作面板、客服入口） - 顶部/底部：
offcanvas-top或offcanvas-bottom - 响应式隐藏：加
offcanvas-lg表示仅在lg及以上断点显示抽屉；加offcanvas-sm表示仅在sm及以下显示
