min-width 在 Bootstrap 4 Popover 中无效是因为 Popper.js 将弹窗挂载到触发元素的 parentNode，若该父容器有 overflow: hidden、transform 等限制，会干扰尺寸计算；必须设置 container: 'body' 才能让 min-width 生效。
min-width 在 Bootstrap 4 的 Popover 中直接写在 .popover 上通常无效——不是 CSS 写错了，而是 Popper.js 渲染时挂载位置和父容器限制导致样式被裁或未生效。
为什么 min-width 不起作用？
Bootstrap 4 默认把 Popover 插入到触发元素的 parentNode 中。如果这个父容器有 overflow: hidden、transform、position: relative 或 max-width，Popper.js 就无法正确测量尺寸，你写的 min-width: 300px 可能被压成 120px，甚至不触发。
- 典型现象：弹窗窄得只容下几个字、内容横向溢出、出现滚动条
- 高危场景：
<td>、<button-group>、<input-group>、带transform的卡片容器 - 别试
!important——问题不在优先级，而在 DOM 挂载点和计算上下文
必须先设 container: 'body'
这是让 min-width 生效的前提。它把 Popover 移出局部容器，挂到 <body> 下，获得完整视口空间和干净的样式继承链。
- HTML 写法：
data-container="body" - JS 初始化：
$(el).popover({ container: 'body' }) - 全局默认（慎用）：
$.fn.popover.Constructor.Default.container = 'body'
再加 min-width 和内容换行控制
挂到 body 后，min-width 才真正参与布局计算。但注意：Popover 内容区（.popover-body）默认对长无空格字符串（如 UUID、base64）不折行，视觉上仍“撑不开”。
立即学习“前端免费学习笔记（深入）”；
- 给
.popover加min-width：.popover { min-width: 300px; } - 必须启用
html: true，否则自定义template里的样式会被忽略 - 推荐自定义
template，显式控制换行：template: '<div class="popover" role="tooltip"><div class="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—— 对中文/数字串折行不可靠
箭头错位？用 popperConfig 修复（仅限 Bootstrap 5）
Bootstrap 4 不支持 popperConfig，所以如果你用的是 Bootstrap 4，挂到 body 后箭头偏移是常见副作用。此时可：
- 用 CSS 强制修正箭头位置，例如底部弹窗：
.popover.bottom .arrow { margin-left: 50%; } - 或监听
shown.bs.popover事件后微调：$(el).on('shown.bs.popover', () => setTimeout(() => $('.popover').css('left', '50%'), 1)) - 注意：不要在
show.bs.popover里直接改left/top—— Popper.js 还没渲染完，会覆盖掉
真正卡住人的地方，往往不是 min-width 写在哪一行，而是它根本没机会被计算——DOM 挂载点一错，后面所有样式都是徒劳。先确认 container，再动 CSS，最后调内容换行，顺序不能反。
