直接修改 .modal-dialog 的 max-width 是唯一稳定生效的方式，因 Bootstrap 居中依赖 transform 锚点于该值，width 和类名易被 flex 忽略致偏移；推荐用 CSS 变量 --bs-modal-max-width（加在 .modal 上），配合 vw 或 min() 响应式设置，并注意 JS 动态修改后需调用 handleUpdate() 及修正 transform 和层级。
直接改 .modal-dialog 的 max-width 是唯一稳定生效的方式，其他所有“设 width”“加 data-width”“JS 传参数”都无效或引发偏移、滚动异常。
为什么 style="width: 800px" 或 modal-lg 类突然不生效
因为 Bootstrap 的居中逻辑依赖 transform: translate(-50%, -50%)，而这个计算锚点是 .modal-dialog 的 max-width 值；width 被 flex 布局忽略，硬设只会让 transform 错位，视觉上模态框偏右偏下。常见失效原因包括：
-
.modal-content或.modal-body里写了width: 100%、display: flex或固定max-width，反向压制了父容器尺寸传递 - 外层多套了一层
<div>，Bootstrap 只识别.modal的直接子元素为有效.modal-dialog - 项目全局 CSS 里有更高优先级的选择器（如
.my-page .modal-dialog）覆盖了你的样式 - 用了
modal-fullscreen但没清掉父容器的overflow: hidden，导致内容被截断
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是display: flex; flex-direction: column，否则.modal-body的max-height不起作用 -
.modal-body必须设max-height: calc(100vh - 180px)（减去 header + footer + padding），并加overflow-y: auto
真正容易被忽略的是：改宽之后，.modal-backdrop 的铺满范围可能没同步更新，z-index 若没比 .modal 至少高 1，点击遮罩层就关不掉弹窗——这不是尺寸问题，是层级和事件捕获链断了。
