Bootstrap 5.2+ 推荐用 offcanvas 实现底部弹出菜单，因其原生支持 placement="bottom"、不阻塞页面滚动、动画更顺滑；需通过 max-height 和 overflow-y 控制高度与滚动，并用 data-bs-dismiss="offcanvas" 确保可靠关闭。
底部弹出菜单用 modal 还是 offcanvas？
Bootstrap 5.2+ 推荐用 offcanvas，不是 modal。因为 modal 默认居中、带背景遮罩、会阻止 body 滚动，而底部菜单需要贴底、轻量交互、不干扰页面内容滚动。用 modal 强行改样式容易破坏响应式逻辑，还可能在 iOS 上触发 viewport 缩放异常。
关键点：
-
offcanvas原生支持placement="bottom"，且默认禁用 backdrop（可选开启） - 它不会重置
body的overflow，滚动更自然 - 在手机端触控反馈更灵敏，动画由 CSS transform 驱动，比
modal的 opacity + scale 更顺滑
如何让 offcanvas 真正“贴底”且不遮挡内容？
默认 offcanvas-bottom 会占满整个视口高度，但你要的是“从底部滑出、高度自适应内容”，不是全屏覆盖。必须手动限制高度并加滚动：
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="actionMenu">
<div class="offcanvas-header">
<h5 class="offcanvas-title">操作</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body d-flex flex-column">
<button class="btn btn-outline-primary w-100 mb-2">分享</button>
<button class="btn btn-outline-danger w-100 mb-2">删除</button>
<button class="btn btn-link text-muted w-100">取消</button>
</div>
</div>
然后加一行 CSS 控制最大高度和滚动：
.offcanvas-bottom .offcanvas-body {
max-height: 60vh;
overflow-y: auto;
}
注意：60vh 是经验值，太高会盖住关键内容，太低则菜单项显示不全；iOS Safari 对 vh 有兼容问题，如果发现高度不准，可改用 max-height: 400px 回退。
点击菜单项后怎么自动关闭并防止重复触发？
直接用 data-bs-dismiss="offcanvas" 是最稳妥的方式，它会触发隐藏事件、清理状态、恢复 focus，且不会因 JS 错误导致菜单卡死：
- 每个可操作按钮都加上
data-bs-dismiss="offcanvas"，比如： - 不要在按钮上同时写
onclick和data-bs-dismiss—— Bootstrap 的 dismiss 会先触发，JS 事件可能被中断 - 如果需要关闭前执行逻辑（如确认删除），改用 JS 监听
hide.bs.offcanvas事件，在回调里return false阻止关闭，或调用offcanvas.hide()手动控制
为什么 iOS 上第一次点击没反应，或关闭后页面不能滚动？
这是 iOS Safari 的经典 bug：当 offcanvas 打开时，如果 body 内容原本可滚动，关闭后 body 的 overflow 可能没恢复，或焦点丢失导致 touchstart 不触发。解决方法很具体：
- 确保
没有硬编码style="overflow: hidden"—— Bootstrap 会自动加/删class="offcanvas-open"来控制，手动干预会冲突 - 在
hidden.bs.offcanvas事件里强制恢复 body 滚动：document.body.style.overflow = '' - 避免在
offcanvas-body里放position: fixed元素，iOS 下 fixed 容易脱离 offcanvas 容器，造成定位错乱
真正麻烦的不是实现，而是 iOS 上各种“看起来正常但偶发失效”的交互细节——比如快速连点两次、从菜单内跳转路由后再返回，这些场景都要实机多测。
