Modal 默认不自动伸缩，需移除 max-width/min-width 并设 display: inline-flex 或 width: max-content，配合 word-break 和 min-width 兜底，且须确保内容无强制宽度干扰。
Modal 默认不会“随内容自动伸缩”——它默认撑满视口宽度的 80%，且受 max-width 限制（如 modal-lg 限 800px）。所谓“自动伸缩”，其实是**让 modal-dialog 宽度尽可能贴合内容，同时不溢出、不坍缩、不破坏居中**。这需要绕过 Bootstrap 的预设约束，而不是依赖 modal-sm 或 w-100 这类静态类。
为什么直接加 w-100 或 fit-content 不行
Bootstrap 5 的 .modal-dialog 是 flex 容器，默认 flex: 0 0 auto，但父级 .modal 给了它 min-width: 400px 和 max-width: 80%，这两条会压制 width: fit-content 或 inline-block 行为；w-100 强制占满父容器，反而失去“贴合内容”的效果。
-
w-100让 dialog 宽度 = modal 宽度（≈80vw），不是内容宽度 -
display: inline-block在 flex 父容器里会被重置为block，失效 - 直接写
width: fit-content会被max-width: 80%截断，小屏下仍宽得离谱
真正生效的 CSS 组合：去掉约束 + 内容驱动
核心是两步：先解除 Bootstrap 的 max-width 和 min-width 干预，再用 inline-flex 或 width: max-content 让容器“看内容脸色行事”。
- 给
.modal-dialog加style="max-width: none; min-width: 0;"（或自定义 class 覆盖） - 把
.modal-dialog改成display: inline-flex，并确保.modal-content不设固定 width - 内容区（如
.modal-body）避免用container，改用px-3或text-center控制内边距和对齐 - 如果内容含长单词或代码块，必须加
word-break: break-word到.modal-body，否则max-content会撑爆
示例：
<div class="modal-dialog" style="max-width: none; min-width: 0; display: inline-flex;">
<div class="modal-content">
<div class="modal-body px-4 py-3">
<p style="word-break: break-word;">这是一段可能超长但需要自动折行的文字</p>
<button class="btn btn-primary">确认</button>
</div>
</div>
</div>
内容极简时容易塌缩，得加最小宽度兜底
当 Modal 里只有几个字或一个图标时，inline-flex 会让 dialog 塌缩到几像素宽，视觉上消失。这不是 bug，是 fit-content 的正常行为。
- 加
min-width: 280px（或根据业务定 240px/320px）到.modal-dialog，防止过窄 - 别用
min-width: 20%—— 小屏下 20% 可能只有 76px，仍不够放按钮 - 如果 Modal 含表单控件（如
input），它们自身有min-width，可自然撑开 dialog，此时兜底值可设小些
动态内容（如 JS 渲染后变宽）需手动触发重排
Modal 打开后，若 JS 动态往 .modal-body 插入宽内容（比如表格、图表），inline-flex 不会自动响应——浏览器不会重新计算 width。
- 插入内容后，执行
modalDialogEl.querySelector('.modal-dialog').style.width = 'auto'，再设回''触发重排 - 更稳妥：调用
getBoundingClientRect()读一次尺寸，强制 layout - 避免在
resize事件里反复操作，Modal 通常不随窗口缩放而重算宽度
最常被忽略的是：内容驱动宽度的前提是内容本身不带强制宽度（比如 table { width: 100% }），否则 dialog 会被拉宽。检查子元素的 width、min-width 和 white-space 设置，比调 modal 类更重要。
