Modal尺寸类失效主因是CSS覆盖或结构错误：modal-lg/sm仅改.modal-dialog的max-width，若.modal-content或.modal-body有固定宽、flex布局或外层套div会失效；优先用CSS变量（如--bs-modal-width）或自定义class替代类名覆盖。
Modal尺寸类名不起作用？先确认是否覆盖了Bootstrap默认样式
Bootstrap的modal-lg、modal-sm只改.modal-dialog的max-width，但如果你在.modal-content或.modal-body里写了固定width、max-width或display: flex类（比如d-flex），尺寸类就会失效。
- 检查浏览器开发者工具里
.modal-dialog的实际max-width计算值，看是否被其他CSS规则覆盖 - Bootstrap 5.3+ 的
modal-xl对应1140px，但若项目用了自定义--bs-modal-max-widthCSS变量，它会直接覆盖所有尺寸类 - 不要在
data-bs-target指向的模态框HTML外层再套div——Bootstrap只认直接子元素为.modal-dialog
用CSS变量或自定义class改大小更可靠
靠覆盖类名容易漏掉响应式断点，直接操作CSS变量或写新class更可控。Bootstrap 5.2+ 支持--bs-modal-width、--bs-modal-max-width等变量，优先级高于尺寸类。
- 给
.modal加style="--bs-modal-width: 800px; --bs-modal-max-width: none;"，就能强制宽度且不限制最大值 - 如果要适配移动端，推荐写独立class：
.modal-wide { max-width: 90vw; }，然后在HTML中：<div class="modal-dialog modal-wide"> - 避免用
!important——它会让后续媒体查询难维护；改用更高权重的选择器，比如.my-modal .modal-dialog
动态设置Modal宽度时，别忘了重置modal-backdrop层级
手动调大Modal后，有时背景遮罩层（.modal-backdrop）没跟着铺满全屏，或者按钮点击无反应——大概率是z-index冲突或transform影响了事件捕获。
- 确保
.modal的z-index比.modal-backdrop高至少1（默认分别是1055和1050） - 如果用JS动态改
.modal-dialog的style.width，记得随后调用bootstrap.Modal.getInstance(modalEl).handleUpdate()（Bootstrap 5.2+），否则内部定位可能错位 - 禁用动画时（
data-bs-animation="false"），transform不会被移除，可能导致宽高计算偏差，此时应显式设transform: none
Modal内容溢出导致滚动异常？关键在.modal-body的max-height
自定义尺寸后，常出现内容撑开整个页面、滚动条出现在body上而不是.modal-body内——根本原因是.modal-body没设高度约束，父级.modal-content又没设display: flex布局。
- Bootstrap 5默认
.modal-content是display: block，所以必须给.modal-body加max-height: calc(100vh - 180px)之类的具体值（减去header/footer高度） - 更稳妥的做法：给
.modal-content加class="d-flex flex-column"，再给.modal-body加class="flex-fill overflow-auto" - 注意
overflow-y: auto在Safari里对flex容器支持不稳定，可补min-height: 0防止内容塌缩
实际改宽容易，但滚动、层级、响应式三者一碰就出问题。最常被跳过的一步是：改完尺寸后没检查.modal-body是否真在自己该在的盒子里滚动。
