直接修改 modal-dialog 的 max-width 才生效，因其采用 flex 布局与 transform 居中，width 被忽略且会破坏锚点；响应式类 mw-* 或自定义 css 覆盖 max-width 是正确方式，需配合 handleupdate() 和 dom 位置规范。
直接改 modal-dialog 的 max-width 才生效，其他所有方式——比如写 style="width: 800px"、传 data-bs-width、调 JS 配置项——都会失效或导致模态框偏移、滚动异常。
为什么 width 在 modal-dialog 上完全没反应
Bootstrap 5 的 modal-dialog 是 display: flex 容器，居中靠 transform: translate(-50%, -50%) 实现，锚点是它的 max-width 值。width 在 flex 布局下被浏览器忽略，硬设只会让 transform 锚点错位，视觉上模态框偏右偏下。
-
style="width: 90%"写在modal-dialog上无效——父容器没设display: flex，且居中不靠宽度撑开 -
$('#myModal').modal({ width: '900px' })直接报错——Bootstrap 原生 JS 不支持该配置项 - 改
modal-content的width会导致内容裁切或左右留白——它只是子元素，不控制外层布局尺寸
用响应式 mw-{breakpoint}-{value} 类最轻量
Bootstrap 5.2+ 内置了响应式最大宽度类，必须加在 modal-dialog 元素上才生效，作用对象是它本身，不是 modal-content。
-
mw-100：所有断点下最大宽度为 100% -
mw-md-75：≥768px 时最大宽度为 75% -
mw-lg-50：≥992px 时最大宽度为 50% -
mw-xl-40：≥1200px 时最大宽度为 40%
示例写法：
<div class="modal-dialog mw-100 mw-md-75 mw-lg-50 mw-xl-40"> <div class="modal-content"></div> </div>
自定义 CSS 覆盖 max-width 更灵活
当内置类不够用（比如要精确到 720px 或适配非标准断点），就得写 CSS。关键只改 max-width，别碰 width 或 margin，否则破坏居中逻辑。
- 不要用
!important，优先通过选择器权重覆盖，例如加.my-modal .modal-dialog - 媒体查询里只设
max-width，例如：@media (min-width: 768px) { .modal-dialog { max-width: 720px; } } - 如果 Modal 内有固定宽表格或代码块，记得同时给
modal-body加overflow-x: auto，避免横向溢出
容易被忽略的坑：Modal DOM 位置和 handleUpdate()
如果模态框 DOM 不在 下（比如被挂到某个 position: relative 的 div 里），所有居中和响应式逻辑都会错乱；另外，用 JS 动态切换类（比如从 mw-md-75 切到 mw-lg-50）后，必须手动触发 $('#myModal').modal('handleUpdate')，否则高度变化后位置偏移。
