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;"> <li>别写 <code>--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）。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• <div class="modal-dialog mw-100 mw-md-75 mw-lg-50"> 表示：所有屏宽下最大宽度 100%，≥768px 时为 75%，≥992px 时为 50% <li>这些类必须写在 <code>.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"> <li>CSS：<code>.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 生效，且必须在它身上。