Bootstrap 5.2+ 应使用 --bs-modal-max-width 变量设 vw 单位于 .modal-dialog 元素上，优先级高且不破坏响应式；响应式可用 mw-{breakpoint}-{value} 类；JS 动态修改后须调用 handleUpdate()。
直接用 --bs-modal-max-width 变量设 vw 单位最稳
Bootstrap 5.2+ 原生支持 --bs-modal-max-width，它优先级高于 modal-lg 等预设类，且不破坏响应式断点逻辑。关键点是：必须写在 .modal-dialog 元素上，单位用 vw 而不是 %——vw 基于视口宽度，不受父容器 padding/margin 干扰，而 % 会因 .modal 默认没有 display: flex 导致计算异常。
<div class="modal-dialog" style="--bs-modal-max-width: 80vw;">- 别写
--bs-modal-width：它只影响基础宽度，不控制上限，--bs-modal-max-width才是主力 - 加在
.modal或.modal-content上无效，必须作用于.modal-dialog
用响应式工具类 mw-{breakpoint}-{value} 避免手写 CSS
Bootstrap 5 内置了 mw-100、mw-md-75、mw-lg-50 这类响应式最大宽度类，它们直接作用于 .modal-dialog，无需额外样式表，也兼容旧版本（只要 Bootstrap ≥ 5.0）。
-
<div class="modal-dialog mw-100 mw-md-75 mw-lg-50">表示：所有屏宽下最大宽度 100%，≥768px 时为 75%，≥992px 时为 50% - 这些类必须写在
.modal-dialog上，写在.modal或.modal-content上不生效 -
mw-类只控制max-width，不影响width或margin，和居中逻辑天然兼容
JS 动态改宽必须调用 handleUpdate()
如果需要运行时切换宽度（比如根据内容长度或用户偏好），不能只改样式，否则 transform: translate(-50%, -50%) 锚点仍按旧尺寸计算，导致模态框偏右偏下。
- 正确写法：
modalEl.querySelector('.modal-dialog').style.maxWidth = '90vw'; modal.handleUpdate(); - 或者用 CSS 变量：
modalEl.style.setProperty('--bs-modal-max-width', '90vw');，同样要跟handleUpdate() - 禁用动画时（
data-bs-animation="false"），还需手动清空 transform：modalEl.querySelector('.modal-dialog').style.transform = 'none';
自定义 class 覆盖 max-width 是最兼容方案
如果你还在用 Bootstrap 4 或 5.1 以下版本，CSS 变量不可用，唯一可靠方式就是给 .modal-dialog 加自定义 class，并在 CSS 中重写 max-width。注意别碰 width——它在 flex 布局下被忽略，硬设反而破坏居中。
- HTML：
<div class="modal-dialog modal-wide-85"> - CSS：
.modal-wide-85 { max-width: 85vw; } - 响应式适配：
@media (min-width: 992px) { .modal-wide-85 { max-width: 90vw; } } - 别用
!important：靠选择器权重（如.my-page .modal-dialog.modal-wide-85）更易维护
handleUpdate()，或者把变量/样式加错元素层级。尤其是多人协作时，有人顺手在 .modal 上写 style="--bs-modal-max-width"，结果完全没效果——这个变量只对 .modal-dialog 生效，且必须在它身上。 
