下拉菜单被 overflow: hidden 容器截断的根本原因是其父级设置了 overflow: hidden 或 transform，导致 popper 计算的位置被裁剪；最稳定修复方式是使用 container: 'body' 将菜单挂载到 body 下，避开局部干扰。
下拉菜单被 overflow: hidden 容器截断
根本原因是 .dropdown-menu 被父级设置了 overflow: hidden 的元素包裹，Popper 计算出的位置一旦超出该容器边界，就会被直接裁剪——不是位置错了，是被“砍掉”了。
- 最常见于
.navbar、.card-header、自定义div套了overflow: hidden或transform - 浏览器开发者工具里选中遮挡它的父元素，在 Computed 标签页搜
overflow或transform，一眼就能确认 - 不要尝试用
z-index解决——裁剪发生在绘制前，z-index 再高也没用
用 container: 'body' 脱离干扰父容器
这是最稳定、副作用最小的修复方式：让 .dropdown-menu 不再挂在触发按钮的 parentNode 下，而是直接挂到 ，彻底避开所有局部 overflow 和 transform 干扰。
- HTML 层面：
data-bs-container="body"（注意不是data-container） - JS 初始化层面：
new bootstrap.Dropdown(element, { container: 'body' }) - ⚠️ 注意：
data-bs-container="body"不能和data-bs-placement="auto"同时用（auto已废弃） - 如果业务强约束必须限制在某区域内（如侧边栏），可设
container: '#sidebar'，但务必确认该节点没有transform或overflow: hidden
动态移出再移回（兼容旧版本或特殊场景）
当无法修改初始化方式，或项目还在用 Bootstrap 4/早期 5.x 且 container 选项不可靠时，可用事件钩子临时搬运 DOM。
- 监听
show.bs.dropdown，把.dropdown-menu从原位置detach()，加绝对定位后append()到body - 监听
hidden.bs.dropdown，再把它detach()并append()回原始父容器 - 关键细节：搬运时要手动设置
left和top为触发按钮的offset()，否则会飘走 - 不推荐长期使用——DOM 搬运破坏语义结构，影响焦点管理与可访问性
为什么 transform 父容器会让 offset 错乱
transform（包括 translate、scale、rotate）会创建新的包含块（containing block）和层叠上下文，导致 Popper 的坐标系以该元素为原点重新计算，而不是整个 viewport。结果就是菜单箭头指向虚空、位置整体偏移。
- 修复首选：移除父级
transform，改用top/left+position: relative - 临时绕过：
popperConfig: { modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] } - 更彻底的方案：
boundary: 'window'（Bootstrap 5.2+ 支持），强制 Popper 以视口为边界判断溢出 - 别在触发按钮上加
transform或filter——这会让整个下拉菜单降级到它的局部上下文中
container: 'body' 覆盖 90% 的裁剪问题；剩下那 10%，几乎都卡在 transform 和 overflow: hidden 叠加的组合拳上——这时候光调 CSS 没用，得动 Popper 的坐标逻辑。
