<p>Bootstrap Modal 宽度由 CSS 类（如 modal-sm/lg/xl）控制，非 data-* 属性或 JS 参数；需通过自定义 class 覆盖 .modal-dialog 的 max-width 并兼顾响应式断点与 modal-content 内边距。</p>
Modal 宽度由 CSS 类控制，不是靠 data-* 属性或 JS 参数
bootstrap 的 modal 默认宽度由预设的 css 类决定，比如 modal-sm、modal-lg、modal-xl。它不响应 width 内联样式，也不认 data-width 这类自定义属性——直接写 style="width: 800px" 在 modal-dialog 上大概率失效，因为 bootstrap 用 max-width + 媒体查询锁死了尺寸逻辑。
常见错误现象：
– 给 modal-dialog 加 style="width: 90%" 没反应
– 在 JS 里调用 $('#myModal').modal({ width: '900px' }) 报错或无效（Bootstrap 本身不支持这个配置项）
– 改了 .modal-content 的 width，但内容被裁切或左右留白异常
- 真正起作用的是
modal-dialog的max-width，以及它父容器的 padding 和 flex 行为 - 响应式场景下，不同断点（
sm/md/lg）对应不同max-width，硬覆盖需加!important或提高选择器优先级 - 如果用 Bootstrap 5+，
modal-xl对应1140px，但屏幕小于1200px时会回落到500px—— 这是媒体查询导致的，不是 bug
用自定义 class 覆盖默认 max-width（推荐）
最稳的方式：不改源码、不 hack JS，只加一个自己的 class 到 modal-dialog，然后在 CSS 里重置 max-width。这样兼容所有 Bootstrap 版本（4/5/6），且不影响响应式逻辑。
使用场景：
– 需要固定宽度（如 850px）且不随屏幕缩放
– 宽度需适配特定内容（如宽表格、代码 diff 区域）
– 团队项目中避免全局污染 .modal-dialog
- HTML 中写：
<div class="modal-dialog modal-wide"> - CSS 中写：
.modal-wide .modal-dialog { max-width: 850px; } - 若需响应式宽度，可配合媒体查询：
@media (min-width: 992px) { .modal-wide .modal-dialog { max-width: 90vw; } } - 注意不要只改
width：Bootstrap 用flex布局居中，width不生效；必须动max-width
Bootstrap 5+ 的 gap 和 padding 影响实际可视宽度
在 Bootstrap 5.2+ 中，modal-dialog 默认有 margin（居中用），而 modal-content 有 padding（默认 1rem）。如果你发现“设了 max-width: 800px，但内容区看起来只有 760px”，大概率是这层 padding 吃掉了空间。
性能 / 兼容性影响：
– 直接删 modal-content 的 padding 会影响所有模态框，不推荐
– 更安全的做法是在自定义 class 里单独控制内边距：
.modal-wide .modal-content {
padding: 0;
}
.modal-wide .modal-body {
padding: 1.5rem;
}
- 别碰
modal-dialog的margin：它负责水平居中，改了会偏移 - 如果 Modal 里嵌了
table或pre，记得检查white-space和overflow，否则宽内容会撑破容器 - 移动端（
xs断点）下，Bootstrap 强制max-width: 100%，此时你的modal-wideclass 会被覆盖，需额外加@media (max-width: 576px)限定
JS 动态设置宽度？可以但没必要
真有运行时动态需求（比如根据内容长度算宽度），可以用 JS 改 modal-dialog 的 style.maxWidth，但要注意时机和清理。
常见错误现象：
– 在 show.bs.modal 事件里设宽度，但模态框还没渲染完成，DOM 尺寸不准
– 多次打开同一个 Modal，宽度越叠越大（没重置）
– 没监听 hidden.bs.modal，导致下次打开沿用上次的 inline style
- 正确时机：用
shown.bs.modal事件（动画结束、DOM 已就位） - 示例：
$('#myModal').on('shown.bs.modal', function () { $(this).find('.modal-dialog').css('max-width', 'calc(100vw - 4rem)'); }); - 如果 Modal 可重复使用，建议在
hidden.bs.modal里清空 inline style：$(this).find('.modal-dialog').css('max-width', ''); - 纯 CSS 方案更轻量、可缓存、无 JS 依赖 —— 除非宽度逻辑极其复杂（比如依赖 DOM 文本流测量），否则优先走 CSS
实际改宽度时，最容易被忽略的是移动端断点覆盖和 modal-content 的 padding 叠加效应。这两个地方一错，桌面看着对，手机上就窄得离谱或者溢出滚动。
