应直接修改 .modal-dialog 的 max-width 和 max-height；Bootstrap 居中依赖 transform 锚点于 max-width，width/height 无效且致偏移；推荐用 CSS 变量 --bs-modal-max-width 或 min(85vw,920px)；JS 修改后须调用 handleUpdate() 并清 transform。
直接改 .modal-dialog 的 max-width 和 max-height 才生效
Bootstrap 居中靠的是 transform: translate(-50%, -50%)，而这个偏移的计算锚点是 .modal-dialog 的 max-width 值。写 width: 800px 或 style="width: 90%" 在 .modal-dialog 上完全无效——它被 flex 布局忽略，还会让 transform 错位，导致模态框偏右偏下。
高度同理：height 不控制整体高度，max-height 才参与约束和滚动逻辑。只设 .modal-content 的 height 会撑满视口，滚动条跑到页面 body 上，而不是框内。
-
.modal-dialog是唯一该动的元素；改.modal-content或.modal-body的 width/height 都是治标不治本，容易留白、裁切或错位 - Bootstrap 5.2+ 推荐用 CSS 变量：
style="--bs-modal-max-width: 85vw;"（加在<div class="modal"> 上，不是 <code>.modal-dialog） - 若用自定义 class（如
modal-wide-920），CSS 中必须写max-width: 920px;，不能只写width - 避免
--bs-modal-width和--bs-modal-max-width同时设——前者会覆盖后者，除非你真要固定死宽度不许收缩 - 如果项目里有全局样式如
.my-page .modal-dialog，它的选择器优先级可能高于你的自定义 class，得加!important或提高 specificity - 外层多套一层
<div> 会破坏 Bootstrap 的结构识别，<code>.modal-dialog必须是.modal的直接子元素动态 JS 修改后必须调用
handleUpdate()用 JS 改了
.modal-dialog.style.maxWidth后，模态框大概率歪了、滚动失效——因为 Bootstrap 内部没重算transform偏移和.modal-body的max-height。已打开状态下修改，必须补两步：
- 调用
bootstrap.Modal.getInstance(modalEl).handleUpdate() - 如果禁用了动画（
data-bs-animation="false"），还得手动清transform：modalEl.querySelector('.modal-dialog').style.transform = 'none';
漏掉任何一步，都会出现视觉偏移或内容不可滚动。
.modal-body滚动失效？检查flex布局和max-height即使
.modal-dialog和.modal-content尺寸设对了，.modal-body还是不滚动？问题大概率出在布局链上。.modal-content默认是display: block，.modal-body的max-height在这种情况下不生效。必须让它成为 flex 容器的子项：-
.modal-content要设为display: flex; flex-direction: column; -
.modal-body设max-height: calc(100vh - 180px); overflow-y: auto;（180px 是 header + footer + padding 的估算值） - 确保
.modal-content没被设height: 100%或min-height: 100vh，否则它会撑满整个屏幕，把.modal-body的约束顶掉
移动端用
modal-fullscreen时，还要确认父容器没设overflow: hidden，否则内容会被截断。 - 调用
响应式宽度别用 %，优先选 vw 或 min()
% 相对父容器，但 .modal 默认没有显式 width，所以 width: 90% 常常算出来是 0；vw 直接相对视口，更可控。
想兼顾小屏和大屏？直接写：style="--bs-modal-max-width: min(85vw, 920px);"。这比媒体查询更简洁，且自动适配 Bootstrap 的断点逻辑。
立即学习“前端免费学习笔记（深入）”；
