Bootstrap 5 的 modal 默认不响应断点，需手动用断点类组合（如 d-none d-md-block + modal-sm）、媒体查询设置 max-width，或 JS 动态切换尺寸类来实现响应式；modal-fullscreen 与尺寸类互斥。
Modal默认尺寸不响应断点，必须手动覆盖CSS
Bootstrap 5 的 modal-dialog 默认没有响应式尺寸类（比如 modal-lg 不会随屏幕变小自动缩回），它只在中屏及以上生效，小屏下仍会撑满宽度但内容可能溢出或布局错乱。这不是bug，是设计使然——Bootstrap把“尺寸控制权”交给了开发者，靠自定义类或媒体查询接管。
常见错误是直接加 modal-sm 或 modal-lg，结果在手机上还是宽得离谱；或者用 mw-100 + w-100 强制拉伸，反而破坏居中和内边距。
- 正确做法：用 Bootstrap 自带的断点工具类组合，例如
modal-dialog modal-dialog-scrollable modal-dialog-centered基础结构不变，再叠加modal-xl/modal-lg/modal-sm并配合d-{breakpoint}-none和d-{breakpoint}-block控制显隐 - 更稳妥的做法：写轻量级媒体查询，针对
.modal-dialog设置max-width和margin，避开类名冲突 - 注意
modal-fullscreen是独立机制，和尺寸类互斥，不能混用
用display断点类实现多尺寸切换（推荐初学者）
Bootstrap 5.3+ 提供了完整的响应式 display 工具类，可以为不同断点启用不同尺寸的 modal-dialog 实例。原理是并列多个 modal-dialog，每个只在对应断点显示，其余隐藏。
示例结构：
<div class="modal-dialog modal-dialog-centered d-none d-md-block"> <div class="modal-content">...</div> </div> <div class="modal-dialog modal-dialog-centered modal-sm d-md-none"> <div class="modal-content">...</div> </div>
-
d-none d-md-block→ 中屏及以上显示标准尺寸，小屏隐藏 -
d-md-none→ 中屏及更大屏隐藏，仅在xs和sm显示modal-sm - 必须确保两个
modal-dialog在同一层级、同属一个modal容器，否则 JS 初始化会出错 - 缺点：DOM 节点重复，但对多数业务场景影响极小；优点是零 CSS，纯类名驱动，易维护
用CSS媒体查询精准控制max-width（适合定制化需求）
当需要非标准尺寸（比如平板下 80vw、桌面下 60vw、超大屏下 1200px），就得写 CSS。关键是只改 .modal-dialog，不碰 .modal-content，否则破坏圆角、阴影等默认样式。
示例（放入 <style> 或 SCSS）：
@media (max-width: 575.98px) {
.modal-dialog { max-width: 90vw; margin: 1rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
.modal-dialog { max-width: 80vw; }
}
@media (min-width: 992px) {
.modal-dialog { max-width: 60vw; }
}
- 用
vw比px更适应移动端缩放，但需避免过小（如50vw在小屏上可能只剩150px宽） - 记得补
margin，否则小屏下模态框会贴边，失去呼吸感 - 如果用了
modal-dialog-centered，它的transform居中逻辑依然有效，无需额外处理
JavaScript动态切换尺寸类（适合运行时决策）
某些场景下，尺寸要根据数据长度、用户偏好或设备能力决定，比如长表单在桌面展开，在手机折叠为卡片式。这时靠静态类不够，得用 JS 动态加类。
关键点不是监听 resize（太频繁），而是复用 Bootstrap 的 show.bs.modal 钩子：
document.addEventListener('show.bs.modal', event => {
const modal = event.target;
const dialog = modal.querySelector('.modal-dialog');
const widthClass = window.innerWidth < 768 ? 'modal-sm' : 'modal-lg';
dialog.className = dialog.className.replace(/modal-\w+/g, '') + ' ' + widthClass;
});
- 务必先清除旧的
modal-*类，否则类名堆叠导致样式冲突 - 不要在
shown.bs.modal里操作，此时动画已开始，视觉会闪一下 - 如果 Modal 内容异步加载，建议在内容渲染完成后再调用
dialog.classList.add()，避免初始尺寸错位
最常被忽略的是：Modal 的 backdrop 和 keyboard 行为不受尺寸影响，但小屏下如果内容过多又没设 modal-dialog-scrollable，用户就滑不到底部——这个和尺寸无关，却是真实卡点。
