直接修改 .modal-dialog 的 max-width 是唯一稳定生效的方式，因 bootstrap 居中依赖 flex + transform，width 被忽略且破坏 translate(-50%,-50%) 基准；推荐用自定义 class（如 modal-wide-850）覆盖 max-width，或 bootstrap 5.2+ 使用 --bs-modal-max-width 变量。
直接改 .modal-dialog 的 max-width 是唯一稳定生效的方式，其他所有“设 width”“加 data-bs-width”“用 JS 配置对象传宽高”的做法都会失效或引发居中偏移、滚动异常。
为什么 style="width: 800px" 或 data-bs-width 完全没用
Bootstrap 原生不支持 width、height 类配置项，data-bs-* 属性里也没有这类参数；width 在 flex + transform 居中逻辑下被浏览器忽略，真正参与尺寸计算和居中锚点的是 max-width；硬设 width 会破坏 transform: translate(-50%, -50%) 的偏移基准，导致模态框视觉上偏右偏下。
常见错误现象：
-
style="width: 90%"写在.modal-dialog上毫无反应 -
$('#myModal').modal({ width: '900px' })直接报错——Bootstrap 原生 JS 不接受该参数 - 改了
.modal-content的width，内容被裁切或左右留白异常
正确设置宽度：用自定义 class 覆盖 max-width
推荐给 .modal-dialog 元素添加独立 class（如 modal-wide-850），再在 CSS 中重置 max-width。这种方式兼容 Bootstrap 4/5/6，不影响响应式断点逻辑，也不污染全局样式。
HTML 中写：
<div class="modal-dialog modal-wide-850">
<p>CSS 中写：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;">.modal-wide-850 {
max-width: 850px;
}
若需响应式适配（比如大屏用视口宽度）：
@media (min-width: 992px) {
.modal-wide-850 {
max-width: 90vw;
}
}
注意：
- 别只写
width: 850px——它会破坏居中定位 - 避免用
!important，优先靠选择器权重或媒体查询覆盖 - 如果项目用了 Bootstrap 5.2+，可直接用 CSS 变量：
style="--bs-modal-max-width: 850px;"，它优先级高于类名且自动适配断点
动态修改后位置偏移或滚动失效怎么办
手动用 JS 改了 .modal-dialog.style.maxWidth 后，Bootstrap 内部的定位和高度重算逻辑不会自动触发，尤其在模态框已打开状态下，transform 仍按旧尺寸计算，导致视觉偏移；.modal-body 的 max-height 约束也可能不生效。
必须补两步：
- 调用
bootstrap.Modal.getInstance(modalEl).handleUpdate()（Bootstrap 5.2+）刷新布局 - 若禁用了动画（
data-bs-animation="false"），需显式清除 transform：modalDialog.style.transform = "none" - 确保
.modal-content是display: flex; flex-direction: column，否则.modal-body的max-height不会触发内部滚动
全屏场景不要手写 width: 100% 和 margin: 0
Bootstrap 5 原生支持 modal-fullscreen 类，应直接加在 .modal-dialog 上：<div class="modal-dialog modal-fullscreen">。手动覆盖 <code>width 和 margin 会绕过框架的尺寸重置逻辑，导致 .modal-content 内边距塌缩、关闭按钮错位、移动端 Safari 地址栏切换时宽度抖动等问题。
如需断点控制（例如仅在 lg 及以上全屏）：
modal-fullscreen-lg-downmodal-fullscreen-md-down
如果加了 modal-fullscreen 还没全屏，大概率是父容器（如 body 或某个 wrapper）设置了 overflow: hidden 或固定高度，需检查并移除。
