Dropdown 初始化失败主因是未加载 bootstrap.bundle.js 或 DOM 未就绪即初始化；位置错乱源于 Popper 受 transform/filter/overflow 等样式干扰；移动端问题多因 click 延迟或 focus 冲突，需用 button、补 viewport meta 并检查事件绑定。
Dropdown 初始化失败：没触发下拉，点击没反应
根本原因通常是 bootstrap.js（或 bootstrap.bundle.js）没加载，或者 dom 元素初始化时机不对。bootstrap 5 起默认不自动初始化组件，必须显式调用或依赖 data 属性 + 自动初始化逻辑。
- 确保已引入
bootstrap.bundle.min.js（含 Popper），纯bootstrap.min.js不行 - DOM 必须就绪后再初始化：把
new bootstrap.Dropdown(...)放在DOMContentLoaded里，或用 jQuery 的$(document).ready() - 若用 data 属性方式（
data-bs-toggle="dropdown"），检查按钮是否真有data-bs-toggle和data-bs-target（或href指向正确id） - 常见错误：写成
data-toggle="dropdown"（Bootstrap 4 写法），Bootstrap 5 必须是data-bs-toggle
下拉菜单位置错乱、遮挡或偏移
本质是 Popper 定位引擎没正常工作，或容器样式干扰了计算。Dropdown 依赖 Popper 动态计算位置，一旦父容器有 transform、perspective、filter 或 position: relative 但高度为 0，就容易出问题。
- 检查触发元素的最近非-static 父容器 —— 尤其是用了
transform: translateZ(0)或will-change的地方，临时移除试试 - 确认下拉菜单（
.dropdown-menu）没被overflow: hidden的祖先截断；常见于 navbar、card-header 等固定高容器 - 手动指定方位：加
data-bs-display="static"强制不使用 Popper（但会失去自动翻转/防溢出），或用data-bs-offset微调偏移，如data-bs-offset="0,8" - 如果用在 modal 里，modal 默认
enforceFocus可能干扰 focus 流程，可设data-bs-focus="false"
JavaScript 手动控制 Dropdown 开合
直接操作比 data 属性更可控，适合动态场景（比如权限控制后禁用某菜单项，或响应键盘事件）。
- 获取实例：
const dropdown = bootstrap.Dropdown.getInstance(element)（已有实例时）或new bootstrap.Dropdown(element)（首次） - 打开：
dropdown.show()；关闭：dropdown.hide()；切换：dropdown.toggle() - 监听事件用原生方式：
element.addEventListener('show.bs.dropdown', handler)，注意事件名带bs.前缀 - 别在
hide.bs.dropdown里调dropdown.show()—— 会触发循环，改用shown.bs.dropdown后再判断逻辑
移动端点击穿透、两次才展开
iOS Safari 和部分安卓 WebView 下，click 在 <a></a> 或 <button></button> 上可能被延迟或吞掉，尤其当菜单内容含 input 或 focusable 元素时。
- 触发元素优先用
<button type="button"></button>，避免<a href="#"></a>触发页面跳转或 focus 重置 - 给触发按钮加
data-bs-toggle="dropdown"同时，确保它没有onclick阻止默认行为（比如event.preventDefault()） - 若仍异常，加
data-bs-auto-close="outside"（默认值）并确认.dropdown-menu内部没有意外捕获touchstart - 极少数情况需 polyfill：在
head加<meta name="viewport" content="width=device-width, initial-scale=1">，缺这个会导致 iOS click 延迟 300ms
