真要内容驱动宽度，唯一可行方案是用 inline-block + text-center 替代默认 flex 居中；因 modal-dialog 为 flex 容器，width: auto 不参与 transform 锚点计算，会导致偏移或截断。
不能直接“自动撑开”，bootstrap 的 modal-dialog 默认用 max-width + transform 居中，width: auto 会被 flex 布局忽略，强行设会导致偏移或滚动异常。真要内容驱动宽度，得绕过默认居中逻辑，用 inline-block + 文本居中替代。
为什么 width: auto 在 modal-dialog 上无效
Bootstrap 5+ 的 .modal-dialog 是 display: flex 容器，内部靠 transform: translate(-50%, -50%) 居中，锚点是它的 max-width 值。width: auto 不参与该计算，浏览器会按最小内容宽渲染，但 transform 仍以旧尺寸为基准——结果就是模态框歪向左上角，甚至被截断。
-
style="width: auto"写在.modal-dialog上：视觉偏移，不居中 -
style="width: fit-content"同样失效，flex 容器不响应这类值 - 试图给
.modal-content设width: auto：内容区变窄，但外层.modal-dialog还卡在 500px，左右留白巨大
用 inline-block + text-center 实现内容自适应宽度
这是唯一能真正让宽度随内容伸缩的方案，本质是放弃 Bootstrap 的 flex 居中，改用行内块级元素 + 父容器文本居中。它不依赖 max-width，也不触发 transform 锚点错位。
- 给最外层
.modal加text-center类（或style="text-align: center"） - 把
.modal-dialog改成display: inline-block，并去掉默认 margin：style="display: inline-block; margin: 0 auto;" - 确保
.modal-content没设max-width或固定宽，让它自然撑开 - 注意：此法会丢失响应式断点（如
modal-lg），所有屏幕都按内容宽度渲染
示例 HTML 片段：
<div class="modal fade text-center">
<div class="modal-dialog" style="display: inline-block; margin: 0 auto;">
<div class="modal-content">
<div class="modal-body">
<table><tr><td>超宽表格内容</td></tr></table>
</div>
</div>
</div>
</div>
动态内容加载后需手动重算宽度
如果模态框打开后再通过 AJAX 插入内容（比如一段长代码或大表格），inline-block 宽度不会自动更新——DOM 渲染完成前，浏览器还没测量出真实宽。
- 内容插入后，强制重排：
modalDialog.offsetWidth（读取一次触发 layout） - 再调一次
getComputedStyle(modalDialog).width确认是否生效 - 若仍偏窄，检查
.modal-body是否有max-width或overflow-x: hidden把内容压扁了 - 移动端慎用：iPhone SE 屏宽仅 375px，纯内容撑开会横向滚动，建议加
min-width: 300px防过窄
更稳妥的替代思路：用 min() + vw 控制“最小够用”宽度
完全自适应宽度在多端场景下容易失控。多数情况真正需要的是“内容够宽、又不溢出”，这时用 CSS min() 函数比 auto 更可控。
- 给
.modal元素加：style="--bs-modal-max-width: min(90vw, 1200px);" - 这个值会随内容增长到 90vw，但不超过 1200px，避免大屏上过宽
- 必须加在
<div class="modal">上，加在.modal-dialog上无效 - JS 动态修改后，记得调
bootstrap.Modal.getInstance(modalEl).handleUpdate()，否则 transform 锚点还是旧的
真要内容驱动宽度，inline-block 是唯一路径；但绝大多数业务场景里，min(85vw, 960px) 这类约束才是既灵活又稳定的解法——它不追求像素级贴合内容，而是让内容有足够空间展开，同时守住边界。
