最可靠方法是用max-width配合媒体查询覆盖.modal-dialog；禁用width以免破坏flex居中，移动端用95vw+断点上限控制。
直接改 max-width 配合媒体查询最可靠
bootstrap 的 .modal-dialog 宽度由 max-width 控制，不是 width；硬写 style="width: 800px" 会破坏 flex 居中逻辑，导致偏左或失效。真正生效的是 css 中对 .modal-dialog 的 max-width 覆盖，并需配合媒体查询适配不同断点。
常见错误现象：
- 加了
style="width: 90%"没反应 - JS 里调用
$('#myModal').modal({ width: '800px' })报错（Bootstrap 原生不支持该参数） - 设了
max-width: 800px，但小屏下还是太宽、内容被横向挤压
正确做法是定义一个自定义 class，比如 modal-responsive，然后在 CSS 中分层覆盖：
.modal-responsive .modal-dialog {
max-width: 95vw;
}
@media (min-width: 576px) {
.modal-responsive .modal-dialog {
max-width: 500px;
}
}
@media (min-width: 768px) {
.modal-responsive .modal-dialog {
max-width: 700px;
}
}
@media (min-width: 992px) {
.modal-responsive .modal-dialog {
max-width: 850px;
}
}
HTML 中使用：<div class="modal-dialog modal-responsive">
<h3>别碰 <code>width，只动 max-width 和 margin
Bootstrap 5+ 的 .modal 是 display: flex 容器，居中靠 justify-content: center，不是靠 margin: auto。所以给 .modal-dialog 直接设 width 会干扰 flex 行为，反而让模态框“卡”在左侧。
必须保留 max-width，它才是 Bootstrap 响应式宽度机制的控制开关。同时注意：
-
.modal-dialog默认有margin（用于垂直留白），不要清空它，否则顶部贴边 - 如果要微调水平位置，用
mx-auto类，而不是margin-left手动计算 - 避免用
!important——它会让后续媒体查询难以覆盖，改用更具体的选择器，例如.my-page .modal-dialog
移动端优先：用 vw 单位 + max-width 限制上限
纯百分比（如 width: 90%）在小屏上安全，但桌面端容易过宽；纯像素值（如 800px）又在手机上溢出。折中方案是用视口单位 vw，再用 max-width 设硬上限。
例如：
.modal-fluid .modal-dialog {
max-width: 95vw;
}
@media (min-width: 992px) {
.modal-fluid .modal-dialog {
max-width: 1140px; /* 对齐 Bootstrap 5.2+ 的 container-lg */
}
}
这样在手机上占满 95% 视口宽度，到大屏自动收束到 1140px，既不撑爆屏幕，也不显空洞。
注意：vw 在 iOS Safari 早期版本有兼容问题（% 或用 JS 动态注入类。
动态改宽后记得触发 handleUpdate()
如果你用 JS 动态切换 class 或修改 .modal-dialog 的 style.maxWidth，Bootstrap 5.2+ 内部定位可能没重算，导致模态框位置偏移、遮罩层错位。
此时必须手动调用：
const modalEl = document.getElementById('myModal');
const modal = bootstrap.Modal.getInstance(modalEl);
modal.handleUpdate(); // 强制重新计算尺寸和位置
漏掉这一步，尤其在 modal 已打开状态下改宽，大概率出现“内容居中但背景遮罩偏右”或“点击 backdrop 不关闭”的问题。
另外，.modal-content 默认有 padding: 1rem，设了 max-width: 800px 后，实际可视区域只有约 760px —— 这个内边距常被忽略，但直接影响内容排版密度。
