应修改 max-width 而非 width，因 Bootstrap Modal 居中依赖 flex 布局，硬设 width 会破坏居中、撑出视口或响应失效；max-width 支持窄屏自动收缩与宽屏按需扩展，并需配合媒体查询及 overflow-x: auto 等细节处理。
直接改 max-width，别碰 width
Bootstrap 的 .modal-dialog 居中逻辑依赖 flex 布局，硬设 width（比如 style="width: 800px"）会破坏它，导致偏左、撑出视口或响应失效。真正该控制的是 max-width，它允许内容在窄屏自动收缩，又能在宽屏按需扩展。
-
max-width在小屏下可设为95vw（避免左右留白过大），中屏起逐步提升到固定值 - 不要用
!important强覆盖，优先加自定义 class 如modal-responsive，再写媒体查询 - 如果 Modal 内有宽表格或
<pre class="brush:php;toolbar:false;"></pre>，记得同步给.modal-body加overflow-x: auto，否则横向滚动失效
modal-sm / modal-lg 不响应断点，别指望它们自动切换
这两个类是静态尺寸：无论屏幕多大，modal-sm 固定 max-width: 300px，modal-lg 固定 max-width: 800px。叠加写成 modal-sm modal-lg 会冲突，后一个生效，且完全没有断点前缀支持（比如不存在 modal-lg-md）。
- 想实现“小屏占 90%、中屏 500px、大屏 900px”，必须自己写 CSS 媒体查询
- Bootstrap 5.3+ 提供了
modal-xl（max-width: 1140px），适合两列布局，但它仍是全断点生效，不能条件启用 - 若用 Sass，可基于
$modal-md等变量派生断点尺寸，避免硬编码像素值
Modal 内部栅格错乱？先查 .modal-dialog 的 max-width
在 .modal-body 里套 row 和 col-lg-6 想实现大屏两列，结果小屏堆叠正常、大屏还是一列——大概率是 .modal-dialog 的 max-width 太小，压窄了栅格计算基准。
- 默认
modal-dialog中屏以上max-width: 500px，col-lg-6算出来才 250px，根本放不下两列内容 - 解决方法：增大
.modal-dialog的max-width（如800px或直接用modal-xl） - 别给
.modal-dialog或.modal-content加row/col类，它们不是栅格容器，加了反而干扰布局
小屏隐藏大屏显示，光靠 CSS 类不够
用 d-none d-lg-block 能让 Modal 在小屏 DOM 不渲染，但 JS 层若没同步判断，用户点按钮仍会触发 $('#myModal').modal('show')，导致控制台报错或短暂闪现。
- 调用前必须检查断点：
if (window.matchMedia('(min-width: 992px)').matches) { $('#myModal').modal('show'); } - 如果 Modal 启用了
backdrop或keyboard，这些选项也要按断点动态传入，否则小屏误触可能卡死页面 - 更隐蔽的坑：Modal 若没挂载在
<body>顶层（比如嵌在.container里），响应式类可能被父级overflow或position截断，导致隐藏失效
modal-dialog-centered 的垂直居中会偏移——这时必须手动调用 handleUpdate，且得在 DOM 渲染完成后再触发。 
