offcanvas方向由class控制，非data-bs-placement；必须添加offcanvas-start或offcanvas-end类，否则默认从顶部滑入。
Offcanvas 左右位置靠 class 控制，不是 data-bs-placement
Bootstrap 5 的 Offcanvas 方向完全由 class 决定，data-bs-placement 在 Offcanvas 中无效（它属于 Tooltip/Popover 的属性，混用会导致方向错乱）。必须显式添加方向类：offcanvas-start 表示从左侧滑入，offcanvas-end 表示从右侧滑入。漏掉这个 class，哪怕 data-bs-target 和 id 都对，抽屉也会默认从顶部出现——这不是 bug，是未指定方向时的 fallback 行为。
常见误操作包括：
- 写成
offcanvas-left或offcanvas-right（这是 Bootstrap 4 的旧名，5 中已废弃） - 以为加了
data-bs-placement="end"就能控制方向（实际被忽略） - 在 JS 初始化时传
{ placement: 'end' }（Offcanvas 的 JS 构造函数不接受 placement 参数）
offcanvas-start 与 offcanvas-end 的实际表现差异
offcanvas-start 会让抽屉从视口左边缘滑入，内容默认左对齐；offcanvas-end 则从右边缘滑入，内容默认右对齐。但注意：这仅影响抽屉容器自身的定位和入场动画，不影响内部文字或组件的对齐方式——内部仍需用 text-start/text-end 或 ms-auto/me-auto 控制子元素。
右侧抽屉（offcanvas-end）在客服、操作面板等场景更自然，但需额外留意：
- 移动端小屏下，右侧触发按钮容易被手指遮挡，建议搭配
btn-sm或图标+文字组合 - 若页面已有固定右侧悬浮元素（如客服窗），两个
position: fixed元素可能 z-index 冲突，需手动设z-index: 1060以上 -
offcanvas-end的遮罩层（backdrop）默认覆盖整个视口，不会“只遮右侧”，这点和预期一致，无需调整
为什么 offcanvas 必须挂载在 直接子级
Offcanvas 的 DOM 插入逻辑依赖 getBoundingClientRect() 计算视口边界，一旦被包裹在 transform、position: relative 或 overflow: hidden 的父容器中，定位就会偏移甚至完全错位。最典型的错误是把 <div class="offcanvas"> 套在 <code><main></main> 或 <div class="container"> 里——此时抽屉可能从屏幕外飞出，或关闭按钮点击无响应。
<p>正确做法只有两种：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas"><img
src="https://img.php.cn/upload/skill/000/000/081/179074273835215.jpg" alt="Markdown Canvas" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas" class="overflowclass">Markdown Canvas</a>
<p class="overflowclass">将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>把 <code><div class="offcanvas"> 直接写在 <code> 下，和其他组件同级
new bootstrap.Offcanvas(element, { container: 'body' })（但 HTML 写法不支持该选项，必须用 JS）顺带一提：如果用了 offcanvas-end 却发现抽屉从左边出来，90% 是因为没加方向 class，剩下 10% 是 DOM 没就绪时就调用了 show() 方法——确保脚本在 DOMContentLoaded 后执行。
滚动失效、遮罩不响应、关闭按钮点不动的共性原因
这三个问题表面不同，根源往往相同：id 不匹配或 DOM 结构不合法。浏览器不会报错，只会静默失败。
排查顺序建议：
- 检查触发按钮的
data-bs-target值（比如"#sidebar"），再全局搜索页面是否存在id="sidebar"且含class="offcanvas"的元素 - 确认该元素是否在
下直接子级（用开发者工具看层级，别信代码缩进） - 关闭按钮必须在
.offcanvas内部，且带data-bs-dismiss="offcanvas"（不是data-dismiss） -
.offcanvas-body必须设max-height+overflow-y: auto，否则滚动条不出现——仅设overflow-y: auto不够，高度必须有约束
最后一点容易被忽略：Offcanvas 的 backdrop 点击关闭功能，依赖事件委托到 body。如果项目里用了第三方库（如某些 UI 框架）重写了 document.body.addEventListener，或者早期脚本阻止了事件冒泡，backdrop 就会失灵——这时只能退回到手动绑定关闭逻辑。
