怎么用Bootstrap制作Offcanvas侧边栏-Bootstrap教程-PHP中文网

Bootstrap 5.2+ 才正式稳定支持 offcanvas 组件，5.0–5.1 版本为实验性功能，存在 DOM 结构不稳、backdrop 残留、缺失 data-bs-scroll 等问题；必须手动编写 HTML 结构并置于 body 直接子级，配合 data-bs-toggle="offcanvas" 和正确 ID 触发。

怎么用bootstrap制作offcanvas侧边栏

Offcanvas 组件在 Bootstrap 5.2+ 才正式稳定支持

Bootstrap 5.0 和 5.1 的 offcanvas 是实验性功能，DOM 结构、JS 行为和 CSS 类名都不稳定；升级到 5.2.0+ 后才移除 .offcanvas-backdrop 的强制插入逻辑、修复多次 toggle 时 backdrop 残留、支持 data-bs-scroll 等关键特性。如果你用的是旧版本，data-bs-toggle="offcanvas" 可能根本没反应，或者关不掉——先检查 bootstrap.min.js 版本号。

必须手动写 HTML 结构，不能只靠 data 属性触发

Bootstrap 的 Offcanvas 不像 Modal 那样允许纯按钮触发后自动生成 DOM；它要求你提前把

 放在  下（不能嵌套在其他组件内部），否则 JS 初始化会找不到目标或定位错乱。常见错误包括：把  写在  或  里，导致 backdrop 覆盖范围异常
漏写 tabindex="-1"，键盘无法聚焦关闭

没加 id，data-bs-target 就失效
正确结构示例：
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas">
  Open Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="myOffcanvas" aria-labelledby="myOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="myOffcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content here
  </div>
</div>

offcanvas-start / offcanvas-end 控制方向，但移动端默认全屏
方向类名决定侧边栏从哪边滑入：offcanvas-start（左）、offcanvas-end（右）、offcanvas-top（上）、offcanvas-bottom（下）。但注意：在宽度 （即 md 断点以下）时，所有 Offcanvas 默认表现为「全高/全宽覆盖式」，且 backdrop 会强制显示；这是 Bootstrap 响应式设计的硬编码逻辑，无法用 CSS 覆盖 @media 规则绕过。如果需要小屏也保持窄幅抽屉效果，得自己重写 .offcanvas.show 的 transform 和 width。

											
												
												
													Markdown Canvas
													将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。
												
												下载
												
											
										
关闭后焦点不会自动回退，需手动处理可访问性
点击关闭按钮或 backdrop 关闭 Offcanvas 后，焦点会丢失，对屏幕阅读器用户不友好。Bootstrap 不自动管理焦点回退（不像 Modal 那样有 returnFocus 选项）。解决方法是监听 hidden.bs.offcanvas 事件，并显式调用 triggerEl.focus()：
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  const triggerEl = document.querySelector('[data-bs-target="#myOffcanvas"]')
  if (triggerEl) triggerEl.focus()
})
这个细节容易被忽略，尤其当 Offcanvas 由多个不同按钮触发时，得确保每次都能拿到正确的触发元素。