最可靠方法是直接在.modal元素上设置CSS变量--bs-modal-max-width，如style="--bs-modal-max-width: 80vw;"，它优先级高于预设类且不影响响应式逻辑，需注意作用位置、vw单位优势及与其他宽度声明（如--bs-modal-width）的覆盖关系。
直接用 CSS 变量 --bs-modal-max-width 最可靠
bootstrap 5.2+ 开始支持原生 css 变量控制模态框宽度，--bs-modal-max-width 优先级高于 modal-lg 等预设类，且不影响响应式断点逻辑。写法简单、无覆盖风险：
<div class="modal fade" style="--bs-modal-max-width: 80vw;">
<div class="modal-dialog">
<div class="modal-content">...</div>
</div>
</div>
- 必须加在
.modal元素上（不是.modal-dialog），否则不生效 -
80vw比80%更合理——%相对于父容器（通常是 body），而vw直接相对于视口，避免嵌套容器干扰 - 如果同时设了
--bs-modal-width，它会覆盖max-width行为，除非你明确需要固定宽度
modal-dialog 上加自定义 class 容易踩的坑
很多人写 <div class="modal-dialog modal-wide"> 再配 CSS：<code>.modal-wide { max-width: 80%; }，结果无效。常见原因：
-
.modal-content或.modal-body里有width: 100%、display: flex或max-width: 500px—— 子元素会反向约束父容器可用空间 - 外层多套了一层
<div>，比如把 <code>.modal-dialog包在另一个div里，Bootstrap 的定位逻辑只认直接子元素 - 项目中其他 CSS 选择器权重更高，比如
.my-page .modal-dialog覆盖了你的.modal-wide - 没检查开发者工具里
.modal-dialog的computed max-width，误以为样式写了就生效 - 必须手动触发更新：
bootstrap.Modal.getInstance(modalEl).handleUpdate() - 如果禁用了动画（
data-bs-animation="false"），transform不会自动清除，需显式设.modal-dialog.style.transform = "none"，否则居中计算仍按旧尺寸 - 若
.modal-body没设max-height或.modal-content没用display: flex，内容会撑开整个页面，滚动出现在 body 上而不是弹窗内 - 基础写法：
style="--bs-modal-max-width: min(80vw, 900px);"，既不过窄也不溢出 - 更稳妥是写独立 class：
.modal-wide-80 { --bs-modal-max-width: 80vw; }，再配合媒体查询细化 - 避免用
!important强覆盖，后续加@media (max-width: 576px)时容易冲突 - 如果用了
modal-fullscreen类，它本身会忽略--bs-modal-max-width，得换思路：全屏场景下直接控制.modal-dialog的width和margin
JS 动态改宽后位置偏移？别忘了调 handleUpdate()
用 JS 改完 .modal-dialog.style.maxWidth 后模态框歪了、滚动条失效、内容被截断——大概率是 Bootstrap 内部没重算定位和高度。尤其在模态框已打开状态下：
移动端适配要防死宽，优先用 vw + 媒体查询兜底
80vw 在小屏上可能太窄（比如 iPhone SE），大屏又太宽。真要兼顾，别硬写死一个值：
.modal、.modal-dialog、.modal-content、.modal-body 四层都可能悄悄卡住宽度，改一处前最好先看 computed 样式。
