直接修改 .modal-dialog 的 max-width 是唯一稳定生效的方式，因 Bootstrap 居中依赖 transform: translate(-50%, -50%) 锚点于 max-width，而 width 在 flex 布局下被忽略，硬设会导致偏移；其他方式如内联 width、JS 配置、改 .modal-content 宽度等均失效或引发布局异常；推荐用自定义 class 覆盖 max-width 或 Bootstrap 5.2+ 的 CSS 变量 --bs-modal-max-width（需设在 .modal 元素上），并配合 handleUpdate() 同步更新定位与高度约束。
直接改 .modal-dialog 的 max-width 是唯一稳定生效的方式，其他所有改 width、加 data-bs-width、js 传参数的做法都会失效或导致模态框偏移、滚动异常。
为什么 style="width: 800px" 在 modal-dialog 上完全没反应
Bootstrap 的居中逻辑依赖 transform: translate(-50%, -50%)，而这个计算锚点是 .modal-dialog 的 max-width 值；width 在 flex 布局下被浏览器忽略，硬设只会让 transform 锚点错位，视觉上模态框偏右偏下。
-
style="width: 90%"写在.modal-dialog上无效——父容器没设display: flex，且居中不靠宽度撑开 -
$('#myModal').modal({ width: '900px' })直接报错——Bootstrap 原生 JS 不支持该配置项 - 改
.modal-content的width会导致内容裁切或左右留白——它只是子元素，不控制外层布局尺寸 - 项目全局 CSS 里有更高优先级选择器（如
.my-page .modal-dialog）会覆盖你的样式
用自定义 class 覆盖 max-width（兼容 Bootstrap 4/5/6）
这是最稳妥、无副作用的方式：不改源码、不 hack JS，只加一个 class 到 .modal-dialog，再在 CSS 中重置 max-width。
- HTML 中写：
<div class="modal-dialog modal-wide-850"> - CSS 中写：
.modal-wide-850 { max-width: 850px; } - 若需响应式适配（比如大屏用视口宽度）：
@media (min-width: 992px) { .modal-wide-850 { max-width: 90vw; } } - 别用
!important——它会让后续媒体查询难维护；改用更高权重的选择器，比如.my-modal .modal-dialog
Bootstrap 5.2+ 推荐：用 CSS 变量 --bs-modal-max-width
它优先级高于所有预设类（modal-lg、modal-xl），且自动适配响应式断点，无需写 !important 或复杂媒体查询。
- 必须加在
<div class="modal">元素上，不是.modal-dialog——加错位置完全不生效 - 推荐用
vw单位：style="--bs-modal-max-width: 85vw;"（%相对父容器，vw直接相对视口，更可靠） - 兼顾小屏和大屏：
style="--bs-modal-max-width: min(85vw, 920px);" - 如果同时设了
--bs-modal-width，它会覆盖--bs-modal-max-width行为，除非你明确要固定宽度不许收缩
动态 JS 修改后模态框歪了、滚动条跑 body 上？
手动改完 .modal-dialog.style.maxWidth 后，Bootstrap 内部的定位和高度约束不会自动重算。尤其在模态框已打开时，transform 仍按旧尺寸计算，.modal-body 的 max-height 也不更新。
- 必须调用更新方法：
bootstrap.Modal.getInstance(modalEl).handleUpdate() - 如果禁用了动画（
data-bs-animation="false"），需显式清除 transform：modalEl.querySelector('.modal-dialog').style.transform = 'none'; - 确保
.modal-content没被设height: 100%或min-height，否则会撑开整个视口，让.modal-body的max-height失效 - 手动调大 Modal 后，有时背景遮罩层（
.modal-backdrop）没跟着铺满全屏——大概率是z-index冲突或transform影响了事件捕获
