modal-sm/lg/xl 失效的根本原因是这些类仅通过修改 .modal-dialog 的 max-width 生效，且依赖 Bootstrap 媒体查询断点；若覆盖 $container-max-widths、自定义 --bs-modal-max-width 或在 .modal-content 上设置固定 width / display: flex，便会静默失效。
为什么 modal-sm/lg/xl 在某些设备上没生效
根本原因是这些类只修改 .modal-dialog 的 max-width，且依赖 Bootstrap 内置的媒体查询断点。如果你项目里覆盖了 $container-max-widths、自定义了 --bs-modal-max-width 变量，或在 .modal-content 上写了固定 width / display: flex，尺寸类就会静默失效。
常见错误现象包括：
- 加了
modal-xl，但实际宽度卡在 500px（其实是屏幕 - 用
modal-lg，结果比modal-sm还窄（.modal-body有max-width: 400px覆盖） - 移动端打开 modal，宽度正常；横屏后变窄甚至内容溢出（媒体查询未覆盖所有断点）
Bootstrap 4/5/6 中 modal 尺寸类对应的实际像素值
不同版本和断点下，modal-sm/modal-lg/modal-xl 的 max-width 并不一致，硬记容易出错。关键是理解它们不是“绝对宽度”，而是“最大允许宽度”+ 媒体查询组合：
-
modal-sm：始终是300px（无断点响应，Bootstrap 4–6 统一） -
modal-lg：仅在≥992px（lg断点）生效，值为800px（B4）或800px（B5/B6） -
modal-xl：仅在≥1200px（xl断点）生效，值为1140px（B5/B6）；B4 是1140px但断点为≥1200px - 小屏（
<576px）下所有尺寸类都退化为auto宽度，靠内容撑开，最多不超过90vw
如何让 modal-xl 在中等屏幕（md）也生效
直接加 modal-xl 不行，因为它的 CSS 规则是 @media (min-width: 1200px) { .modal-xl .modal-dialog { max-width: 1140px; } }。想让它在 ≥768px（md）就生效，有两条路：
- 写自定义 class：
.modal-xl-md { max-width: 1140px; }，然后在 HTML 中：<div class="modal-dialog modal-xl-md">；再补一条媒体查询：@media (max-width: 1199.98px) { .modal-xl-md .modal-dialog { max-width: 90vw; } } - 改 CSS 变量（Bootstrap 5.2+）：
<div class="modal" style="--bs-modal-max-width: 1140px;">，它优先级高于所有尺寸类，且无断点限制 - 避免用
!important覆盖原生规则——后续升级或引入插件时容易冲突
移动端适配时最常被忽略的一点
很多人以为加个 modal-dialog modal-lg 就能在平板上显示大框，却忘了 .modal-content 默认有 padding: 1rem，而 .modal-body 没设 max-width，导致文字在窄屏下换行异常、按钮错位。真正要动的是：
-
.modal-dialog的max-width（控制整体容器） -
.modal-content的padding（建议用px或rem，别用%） -
.modal-body的overflow-wrap: break-word（防长单词撑破容器） - 如果用了
form-control类，注意form-control-sm在小屏下 padding 更小，可能影响可点击区域
复杂点在于：modal 宽度逻辑和 backdrop 层、z-index、transform 动画耦合紧密，随便调大后若出现点击无响应、遮罩层不全，大概率不是宽度问题，而是 .modal-backdrop 的 z-index 被其他组件压住了。
