怎么修改Bootstrap模态框的宽度-Bootstrap教程-PHP中文网

直接修改 .modal-dialog 的 max-width 是唯一稳定生效的方式，因 Bootstrap 5+ 的模态框依赖该值参与 transform 居中锚点计算；设 width 会破坏居中、导致偏移，JS 配置 width 参数无效，CSS 变量需设在 .modal 上并调用 handleUpdate() 刷新布局。

怎么修改bootstrap模态框的宽度

直接改 .modal-dialog 的 max-width 是唯一稳定生效的方式，其他所有设 width、加 data-bs-width、用 JS 配置对象传宽高的做法都会失效或导致模态框偏移、滚动异常。

为什么 `style="width: 800px"` 完全没反应

Bootstrap 5+ 的 .modal 是 display: flex 容器，.modal-dialog 居中靠 justify-content: center + transform: translate(-50%, -50%)，而这个 translate 的锚点是 max-width 值；width 在 flex 布局下被浏览器忽略，硬设只会让 transform 计算错位，视觉上模态框偏右偏下。

style="width: 90%" 写在 .modal-dialog 上无效——父容器没设 display: flex（其实它有，但居中不依赖宽度撑开）
$('#myModal').modal({ width: '900px' }) 直接报错——Bootstrap 原生 JS 不支持该参数
改 .modal-content 的 width 会导致内容裁切或左右留白——它只是子元素，不控制外层布局尺寸

怎么用自定义 class 安全覆盖宽度（兼容 Bootstrap 4/5/6）

这是最稳妥、无副作用的方式：不改源码、不 hack JS，只加一个 class 到 .modal-dialog，再在 CSS 中重置 max-width。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

HTML 中写：<div class="modal-dialog modal-wide-850"> <li>CSS 中写：<code>.modal-wide-850 { max-width: 850px; }

若需响应式适配（比如大屏用视口宽度）：

@media (min-width: 992px) {
  .modal-wide-850 {
    max-width: 90vw;
  }
}

别只写 width: 850px——它会破坏居中定位
避免用 !important，优先靠选择器权重或媒体查询覆盖

Bootstrap 5.2+ 怎么用 CSS 变量快速设置

推荐在 .modal 元素上直接设 --bs-modal-max-width，它优先级高于类名，且自动适配断点逻辑。

HTML 中写：<div class="modal" style="--bs-modal-max-width: 850px;"> <li>或响应式写法：<code><div class="modal" style="--bs-modal-max-width: 90vw;"> <li>注意：变量必须设在 <code>.modal 元素上，设在 .modal-dialog 上无效
不要混用 --bs-modal-width（已废弃）和 --bs-modal-max-width，后者才是控制宽度的主变量

动态修改后位置偏移或滚动失效怎么办

手动用 JS 改了 .modal-dialog.style.maxWidth 后，Bootstrap 内部的定位和高度重算逻辑不会自动触发，尤其在模态框已打开状态下，transform 仍按旧尺寸计算，导致视觉偏移；.modal-body 的 max-height 也不会自动更新。

必须手动调用 handleUpdate() 方法刷新布局：myModal.handleUpdate()
如果用了 max-height 控制高度，记得同时给 .modal-body 设 max-height 和 overflow-y: auto
确保 .modal-content 是 display: flex; flex-direction: column，否则 max-height 不生效
如果 Modal 内有宽表格或 <pre class="brush:php;toolbar:false;"></pre>，同步加 overflow-x: auto 到 .modal-body，否则横向滚动失效