Bootstrap 5 中 modal-dialog 的宽度需通过响应式 mw-{breakpoint}-{value} 类（如 mw-md-75）控制，因其默认不响应式缩放；modal-sm/lg/xl 等静态类无法按断点切换，必须组合使用 mw-100、mw-md-75 等类或自定义 CSS 实现精细控制。
Modal在不同断点下如何设置宽度
Bootstrap 5 的 modal-dialog 默认不响应式缩放，它不会随屏幕变小自动变窄——你得手动加类控制。核心思路是：用内置的断点类（如 modal-sm、modal-lg、modal-xl）配合 mw-100 和 w-100，再结合 Bootstrap 5 的响应式工具类（如 modal-dialog-md 这种并不存在，必须自定义或组合使用）。
直接写 class="modal-dialog modal-lg" 只生效一次，无法按断点切换。真正可行的是用 modal-dialog + 响应式宽度类组合：
-
modal-dialog本身是 flex 容器，其子元素modal-content决定实际宽高 - Bootstrap 5 提供了
mw-100（最大宽度 100%）、w-100（固定 100% 宽），但没提供modal-dialog-md这类断点专属类 - 所以得靠
modal-dialog+mw-100+ 断点前缀类（如mw-md-75、mw-lg-50）来控制不同尺寸下的最大宽度
如何用响应式工具类控制 modal-dialog 宽度
Bootstrap 5 的响应式工具类支持 mw-{breakpoint}-{value}（例如 mw-md-75 表示 ≥768px 时最大宽度为 75%）。这是最轻量、无需写 CSS 的方案。
示例写法：
<div class="modal-dialog mw-100 mw-md-75 mw-lg-50 mw-xl-40"> <div class="modal-content">...</div> </div>
含义：
-
mw-100：所有断点下最大宽度 100% -
mw-md-75：≥768px 时最大宽度 75% -
mw-lg-50：≥992px 时最大宽度 50% -
mw-xl-40：≥1200px 时最大宽度 40%
注意：mw- 类作用于 modal-dialog，不是 modal-content；且这些类必须写在 modal-dialog 元素上才生效。
为什么直接加 modal-sm / modal-lg 不起作用
因为 modal-sm 和 modal-lg 是静态尺寸类，它们只在当前断点生效，且彼此互斥——不能叠加，也不能响应式切换。比如：
-
class="modal-dialog modal-lg"在所有屏幕下都用max-width: 800px -
class="modal-dialog modal-sm"固定为max-width: 300px - 写成
modal-dialog modal-lg modal-sm会冲突，后者覆盖前者
更关键的是：这些类没有断点前缀（如 modal-lg-md），Bootstrap 源码里根本没定义这类响应式变体。硬加无效。
需要更精细控制？补一小段 CSS 就够
如果内置工具类不够用（比如想让 modal 在 sm 下占 90%，md 下 80%，lg 下 600px 固定宽），就加个极简 CSS：
@media (max-width: 575.98px) {
.responsive-modal .modal-dialog { max-width: 90%; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
.responsive-modal .modal-dialog { max-width: 80%; }
}
@media (min-width: 992px) {
.responsive-modal .modal-dialog { max-width: 600px; }
}
然后在 HTML 中加上 class="responsive-modal" 即可。不用框架、不污染全局，改起来也快。
别忘了：所有宽度控制都应在 modal-dialog 上做，而不是 modal-content——后者默认 width: 100%，撑不满父容器时会留白。
