直接改.popover的max-width无效，因popover默认挂载于触发元素父容器，若其含overflow:hidden、transform等样式会限制popper.js尺寸计算；须设container:'body'解除限制，并配popperconfig{modifiers:[{name:'computestyles',options:{adaptive:false}}]}修复箭头定位，再通过自定义template设置.popover-body的word-break:break-word确保长内容换行。
直接改 .popover 的 max-width 很可能无效——不是 css 写错了，而是渲染上下文被父容器锁死了。
为什么 max-width 设置了却没效果
Bootstrap 5 默认把 Popover 插入到触发元素的 parentNode 中。如果这个父容器有 overflow: hidden、transform 或 position: relative，Popper.js 就无法正确测量和展开弹窗，你写的 max-width: 600px 会被裁掉或压根不生效。
- 典型现象：内容挤成一竖条、换行异常、出现横向滚动条
- 常见高危容器：
<modal></modal>、<td>、<code><dropdown-menu></dropdown-menu>、带transform的卡片 - 别急着加
!important——问题不在优先级，而在 DOM 挂载位置 - HTML 写法：
data-bs-container="body" - JS 初始化写法：
new bootstrap.Popover(el, { container: 'body' }) - 全局默认（如需）：
bootstrap.Popover.Default.container = 'body' - 注意：挂到
body后，箭头定位可能偏移——这不是 bug，是坐标系变了，见下一条 - 关键配置：
popperConfig: { modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] } - 解释：
adaptive: false关闭对父级transform的自适应，避免坐标计算失真 - 如需禁用自动方向 fallback（比如强制 bottom 不许跳到 top）：
{ name: 'flip', enabled: false }，但要确保目标方向始终有足够空间 - 不要手动写
top/left内联样式——Popper 每次重定位都会覆盖它 - 必须启用
html: true，否则自定义样式会被当纯文本忽略 - 推荐自定义
template，显式控制换行：template: '<div class="popover" role="tooltip"> <div class="popover-arrow"></div> <h3 class="popover-header"></h3> <div class="popover-body" style="word-break:break-word; overflow-wrap:break-word;"></div> </div>' - 避免只用
white-space: pre-wrap——对中文/数字串折行不稳定 - 检查是否有其他 CSS 把
.popover或其祖先设了width/max-width，意外传导下来
必须用 container: 'body' 解除父级限制
这是最稳定、最推荐的第一步。它让 Popover 脱离局部容器，挂到 下，获得完整的视口空间。
箭头错位或弹窗飘走？用 popperConfig 修复定位逻辑
挂到 body 后 Popper.js 的参考系变了，尤其在滚动区域或 fixed 容器中，容易导致箭头指向错误位置或弹窗“飞走”。
内容不换行导致“看着还是窄”？改 .popover-body 的换行策略
max-width 生效了，但长字符串（如 UUID、base64、JSON 片段）不折行，内容溢出、滚动条出现，视觉上依然“窄”。
真正卡住宽度的从来不是 max-width 这一行 CSS，而是 container 位置、Popper 坐标系、内容换行这三者之间的配合。漏掉任意一环，都可能让你在 DevTools 里反复刷新却看不出变化。
