dropdown被父容器裁剪的根本原因是父容器存在overflow: hidden、clip-path或新层叠上下文，而非菜单样式错误；可通过data-bs-container="body"移出dom或boundary: 'window'调整popper边界解决。
Dropdown被父容器裁剪，根本不是菜单自身的问题
下拉菜单显示不全、弹出区域受限——90% 的情况不是 .dropdown-menu 样式写错了，而是它被某个带 overflow: hidden、clip-path 或创建了新层叠上下文（如 transform、filter、opacity）的父容器“关”在里面了。Popper 默认把 boundary 设为 'clippingparents'，也就是向上找第一个有溢出限制的祖先，然后把它当“墙”来约束菜单位置。
检查方式：在浏览器开发者工具里选中 .dropdown-menu，看它的 computed overflow；再逐级往上点父元素，直到发现哪个开始出现 overflow: hidden 或 overflow: clip。常见“罪魁”包括：.accordion-collapse、.card-body、.modal-body、自定义滚动容器（如 div class="scrollable"）。
用 data-bs-container="body" 把菜单 DOM 移出原位置
这是最直接、副作用最小的解法：不改定位逻辑，而是把 .dropdown-menu 这个节点从原 DOM 位置移出来，直接挂到 document.body 下。这样它完全脱离原父容器的溢出和层叠上下文限制。
只需在触发按钮上加属性：
<button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-container="body">Menu</button>
该属性会自动把菜单节点 append 到 document.body，无需手动 JS 操作。注意：data-bs-container 只对使用 data-bs-toggle="dropdown" 初始化的下拉有效；如果用 JS 手动初始化，需改用 container 选项。
用 boundary: 'window' 强制突破容器边界
这是 Popper 层面的硬性干预，告诉定位引擎：“别管中间那些容器，以整个视口为边界”。适合需要精准控制且已用 JS 初始化的场景。
只对需要突破的下拉按钮单独配置，避免全局污染：
const dropdownEl = document.querySelector('#my-dropdown-btn');<br>new bootstrap.Dropdown(dropdownEl, { boundary: 'window' });
-
boundary: 'window'是 Bootstrap 5.2+ 原生支持的选项，兼容性好；boundary: 'body'在页面滚动时可能偏移，不如window稳定 - 设成
'window'后，菜单不再响应父容器的transform/position变化——这点容易被忽略，尤其在模态框或动画容器里 - 如果用
data-bs-toggle初始化，无法直接传boundary，必须改用 JS 初始化
两种方案能混用，但要注意 DOM 位置与定位逻辑的关系
data-bs-container="body" 和 boundary: 'window' 可以同时用，效果更稳：前者解决 DOM 层级限制，后者解决 Popper 定位边界误判。但要注意两者的分工：
前者让菜单脱离父容器的 CSS 限制（比如 overflow: hidden 或层叠上下文），后者让 Popper 不再把中间容器当作 clipping boundary。它们解决的是不同层面的问题，不冲突，但也不等价。
真正容易被忽略的是：一旦用了 data-bs-container="body"，菜单就不再随父容器滚动而位移——如果父容器本身是固定定位或有复杂 transform，菜单可能“飘走”。这时候得靠 boundary: 'window' 配合 popperConfig 微调 offset 或 placement，而不是指望它自动跟住按钮。
