直接修改 modal-dialog 的 max-width 并配合 Bootstrap 5 的 mw-{breakpoint}-{value} 类是唯一稳定且无需额外 CSS 的方式；modal-sm/lg/xl 因为是静态尺寸、无断点响应逻辑，无法按视口动态切换。
直接改 modal-dialog 的 max-width，配合 Bootstrap 5 的响应式 mw-{breakpoint}-{value} 类，是唯一稳定、无需写 CSS 就能生效的方式。硬设 width、用 data-bs-width、或依赖 modal-sm/modal-lg 组合，全部无效。
为什么 modal-sm / modal-lg 不能按断点切换
这些类是静态尺寸：比如 modal-lg 在所有屏幕下都固定为 max-width: 800px（Bootstrap 5.3 默认值），它不感知 min-width: 992px 这类媒体查询条件。你加 class="modal-dialog modal-lg modal-xl"，最终只生效最后一个——类名不会“叠加响应”，而是 CSS 选择器权重覆盖。
-
modal-sm→max-width: 300px -
modal-lg→max-width: 800px -
modal-xl→max-width: 1140px
它们之间没有中间态，也没有断点钩子。想“小屏窄、中屏适中、大屏宽”，必须换思路。
用 mw-{breakpoint}-{value} 类直接控制最大宽度
Bootstrap 5 内置的 mw- 工具类作用于 modal-dialog 元素本身，且支持断点前缀，是官方推荐的轻量方案。关键点：它控制的是 max-width，不是 width，所以不影响居中逻辑。
- 必须写在
<div class="modal-dialog">上，写在modal-content或外层modal上无效 - 多个断点类可共存，优先级按断点升序生效（
mw-md-75覆盖mw-100，当视口 ≥768px） - 常用组合：
mw-100 mw-md-75 mw-lg-50 mw-xl-40表示：小屏全宽 → 中屏 75% → 大屏 50% → 超大屏 40%
示例：
<div class="modal-dialog mw-100 mw-md-75 mw-lg-50"> <div class="modal-content">...</div> </div>
自定义 CSS 变量或 class 是更可控的选择
如果你需要像素级精确（比如固定 850px）、或要兼容旧版 Bootstrap、或需动态 JS 控制，直接覆盖 max-width 更稳妥。注意别动 width，否则 transform: translate(-50%, -50%) 锚点会偏移。
- Bootstrap 5.2+ 支持内联 CSS 变量：
style="--bs-modal-max-width: 850px;"，优先级高于类名 - 自定义 class 方式（推荐用于项目统一管理）：
class="modal-dialog modal-wide"，再配 CSS：.modal-wide { max-width: 850px; } - 响应式需求？加媒体查询：
@media (min-width: 992px) { .modal-wide { max-width: 90vw; } }
别忘了：所有这些修改都只影响 modal-dialog 宽度，modal-content 的 padding（默认 1rem）仍会占用内部空间，实际内容区比设定值窄约 32px。
容易被忽略的垂直方向与内容溢出问题
只调宽度不碰高度，大概率导致大屏两列内容被截断、小屏滚动条错位、或 iOS Safari 下弹出键盘后模态框上移失焦。这不是宽度问题，而是高度链没闭环：
-
modal-body必须设max-height+overflow-y: auto，否则滚动发生在整个页面 body 上 - 如果用了
modal-dialog-centered，切到小屏后记得 JS 监听matchMedia并手动调用handleUpdate()，否则 translateY 偏移不重算 - Modal 若不在
<body>下（比如被挂进某个position: relative的 div），所有居中和断点逻辑都会失效——这是最隐蔽的部署坑
