直接改 .popover 的 max-width 很可能没效果，因为 popover 渲染位置受父容器限制且内容默认不换行；必须设置 container: 'body' 并启用 html: true，再配合 word-break: break-word 等样式才能生效。
直接改 .popover 的 max-width 很可能没效果——不是 CSS 写错了，而是 Popover 渲染位置或内容换行机制卡住了宽度生效。
为什么 max-width 设了却不起作用
Bootstrap 5 默认把 Popover 插入到触发元素的 parentNode 下，如果这个父容器有 overflow: hidden、transform 或 position: relative，Popper.js 计算尺寸时就会被截断。常见现象是：样式写了 max-width: 600px，但弹窗还是窄窄一条，内容挤成一行、不换行、甚至出现横向滚动条。
- 别急着加
!important—— 这治标不治本，反而掩盖真实布局问题 - 检查触发元素是否在
modal、dropdown-menu、table td这类自带限制样式的容器里 - 用浏览器开发者工具选中弹出框，看它的实际父节点是不是你预期的那个
必须显式设置 container: 'body'
这是让 max-width 生效的前提。否则所有宽度调整都可能被父容器裁掉。
- HTML 方式：
<button data-bs-container="body" data-bs-toggle="popover"></button> - JS 初始化方式：
new bootstrap.Popover(el, { container: 'body' }) - 注意：混用
data-bs-*属性和 JS 配置会导致部分参数被忽略，推荐统一用一种方式
内容不换行导致“看起来还是窄”
即使 max-width 生效了，如果 content 是长串无空格文本（比如 UUID、base64、JSON 片段），浏览器默认不会折行，视觉上仍像被压缩。
- 必须启用
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，对中文和数字串兼容性差
设了 container: 'body' 后箭头错位或飘走
挂到 body 下改变了 Popper.js 的参考系，尤其在滚动区域或 fixed 定位容器中，坐标计算容易偏移。
- 加
popperConfig禁用 adaptive 计算：popperConfig: { modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] } - 如果确定方向不会越界（比如按钮永远在视口中部），可关掉自动翻转：
{ name: 'flip', enabled: false } - 别依赖
offset硬调位置——那是掩耳盗铃，根源在坐标系错乱
真正卡住宽度的，往往不是 CSS 写得不够狠，而是渲染上下文和内容换行这两层没理清。尤其是 container 和 html: true，漏掉任何一个，max-width 都只是摆设。
