直接修改 .modal-dialog 的 max-width 才生效，因 Bootstrap 居中依赖 transform: translate(-50%, -50%) 且以 max-width 为锚点；width 无效且导致错位，--bs-modal-max-width（Bootstrap 5.2+）优先级最高，需设在 .modal 元素上，推荐 min(85vw, 920px) 响应式写法，兼容方案用自定义 class 覆盖，JS 修改后须调用 handleUpdate()。
直接改 .modal-dialog 的 max-width 才生效
Bootstrap 居中逻辑依赖 transform: translate(-50%, -50%)，而这个偏移的基准是 .modal-dialog 的 max-width 值。写 width: 800px 或 style="width: 90%" 在 .modal-dialog 上完全无效——浏览器在 flex + transform 场景下会忽略 width，且硬设它会导致居中错位（模态框偏右偏下）。
-
max-width是唯一参与尺寸计算和定位锚点的属性 - 别碰
.modal-content或.modal-body的width，它们只影响内部内容，不控制外框尺寸 - 外层多套一层
<div>会让 Bootstrap 忽略你的.modal-dialog——必须是<div class="modal">的直接子元素 - 检查开发者工具里
.modal-dialog的 computedmax-width，确认它真被设为你想要的值
--bs-modal-max-width 变量优先级最高（Bootstrap 5.2+）
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行为，除非你明确要固定宽度不许收缩
用自定义 class 覆盖最兼容（Bootstrap 4/5/6 通用）
如果你还在用 Bootstrap 4 或需要强兼容性，给 .modal-dialog 加一个自定义 class 是最稳妥的方式，不依赖变量，也不污染全局样式。
- 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
JS 动态改完宽度后模态框歪了？必须调 handleUpdate()
手动用 JS 修改 .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的滚动失效
.modal-content 默认 padding: 1rem 影响，设了 max-width: 800px 后可视内容区大概率只有约 760px —— 这不是 bug，是 padding 吃掉了空间。 
