最可靠方法是直接在.modal元素上设置CSS变量--bs-modal-max-width，如style="--bs-modal-max-width: 80vw;"，它优先级高于预设类且不影响响应式逻辑，需注意作用位置、vw单位优势及与其他宽度声明（如--bs-modal-width）的覆盖关系。

直接用 CSS 变量 --bs-modal-max-width 最可靠

bootstrap 5.2+ 开始支持原生 css 变量控制模态框宽度，--bs-modal-max-width 优先级高于 modal-lg 等预设类，且不影响响应式断点逻辑。写法简单、无覆盖风险：

<div class="modal fade" style="--bs-modal-max-width: 80vw;">
  <div class="modal-dialog">
    <div class="modal-content">...</div>
  </div>
</div>

• 必须加在 .modal 元素上（不是 .modal-dialog），否则不生效
• 80vw 比 80% 更合理——% 相对于父容器（通常是 body），而 vw 直接相对于视口，避免嵌套容器干扰
• 如果同时设了 --bs-modal-width，它会覆盖 max-width 行为，除非你明确需要固定宽度

modal-dialog 上加自定义 class 容易踩的坑

很多人写

再配 CSS：.modal-wide { max-width: 80%; }，结果无效。常见原因：

• .modal-content 或 .modal-body 里有 width: 100%、display: flex 或 max-width: 500px —— 子元素会反向约束父容器可用空间
• 外层多套了一层
  ，比如把 .modal-dialog 包在另一个 div 里，Bootstrap 的定位逻辑只认直接子元素
• 项目中其他 CSS 选择器权重更高，比如 .my-page .modal-dialog 覆盖了你的 .modal-wide
• 没检查开发者工具里 .modal-dialog 的 computed max-width，误以为样式写了就生效

JS 动态改宽后位置偏移？别忘了调 handleUpdate()

用 JS 改完 .modal-dialog.style.maxWidth 后模态框歪了、滚动条失效、内容被截断——大概率是 Bootstrap 内部没重算定位和高度。尤其在模态框已打开状态下：

• 必须手动触发更新：bootstrap.Modal.getInstance(modalEl).handleUpdate()
• 如果禁用了动画（data-bs-animation="false"），transform 不会自动清除，需显式设 .modal-dialog.style.transform = "none"，否则居中计算仍按旧尺寸
• 若 .modal-body 没设 max-height 或 .modal-content 没用 display: flex，内容会撑开整个页面，滚动出现在 body 上而不是弹窗内

移动端适配要防死宽，优先用 vw + 媒体查询兜底

80vw 在小屏上可能太窄（比如 iPhone SE），大屏又太宽。真要兼顾，别硬写死一个值：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 基础写法：style="--bs-modal-max-width: min(80vw, 900px);"，既不过窄也不溢出
• 更稳妥是写独立 class：.modal-wide-80 { --bs-modal-max-width: 80vw; }，再配合媒体查询细化
• 避免用 !important 强覆盖，后续加 @media (max-width: 576px) 时容易冲突
• 如果用了 modal-fullscreen 类，它本身会忽略 --bs-modal-max-width，得换思路：全屏场景下直接控制 .modal-dialog 的 width 和 margin

实际宽度控制最麻烦的点不在写法，而在「谁在真正约束尺寸」——.modal、.modal-dialog、.modal-content、.modal-body 四层都可能悄悄卡住宽度，改一处前最好先看 computed 样式。