modal标题需用响应式flex类实现小屏左对齐、大屏居中，因text-center对flex容器无效；关闭按钮需保留justify-content-between结构；modal-body文本对齐失效常因父容器为flex/grid；垂直居中需js监听断点动态切换modal-dialog-centered并调用handleupdate。
modal标题在不同断点下左右/居中切换
.modal-header 是 flex 容器，text-center 对它无效——这是最常被忽略的点。想让标题小屏左对齐、大屏居中，不能靠文本类，得用响应式 flex 类：
-
justify-content-start（默认）→ 小屏左对齐 -
justify-content-lg-center→ ≥992px 时居中，覆盖前面的设置 - 如果还要保留右上角关闭按钮，别删
.btn-close，它依赖justify-content-between的结构；改用justify-content-sm-between justify-content-lg-center，再给.modal-title加flex-grow-1 text-center
Modal主体内容（.modal-body）响应式对齐失效的典型原因
加了 text-sm-start text-md-center 没反应？大概率是内部结构干扰了 text-align 生效逻辑：
-
.modal-body被包在d-flex容器里（比如手动加了 class="d-flex"），此时text-*类对子元素无效 - 里面嵌了
<form></form>，而某些重置样式或第三方 UI 库会强制设display: block或覆盖text-align - 用了 Vue/React 封装组件，原生
.modal-bodyclass 被隔离或未透传 - 快速验证：临时加
style="border: 1px solid red"到.modal-body，看边框是否包裹文字——不包说明它被 flex/grid 布局撑开，text-align失效
Modal整体垂直位置在不同断点下“微调”不可靠
Bootstrap 的 modal-dialog-centered 是全断点生效的，没有 modal-dialog-centered-md 这种响应式变体。想实现“小屏贴顶、大屏垂直居中”，不能靠类组合，得 JS 动态控制：
- 监听
window.matchMedia('(min-width: 992px)')，匹配时加modal-dialog-centered，否则移除 - 注意：每次切换后要触发
$('#myModal').modal('handleUpdate')，否则高度变化后位置偏移 - 别用
mt-*类模拟——.modal-dialog是 fixed 定位，mt-5在视口缩放或 iOS 键盘弹出时完全失准 - 更隐蔽的坑：如果模态框 DOM 不在
下（比如被挂到某个position: relative的 div 里），所有居中逻辑都会错乱
表单控件（input/select）在 Modal 中无法用 text-* 对齐
表单控件本身不响应 text-align，它们的水平位置由父容器布局决定：
- 想让整个表单居中：给
<form></form>加d-flex justify-content-center - 想让 label 左对齐、input 右对齐：用
d-flex justify-content-between包住 label 和 input，或用row+col-auto控制宽度 - 提交按钮右对齐：单独用
d-flex justify-content-end mt-3包住按钮组，别指望text-end对<button></button>生效 - 注意：
<td> 里的控件也要单独加 <code>text-end，表格单元格不继承父级文本类真正麻烦的是混合场景：比如 modal-header 标题要小屏左、大屏居中，modal-body 里表单要小屏垂直堆叠、大屏左右分栏，还得保证关闭按钮始终在右上角——这些没法靠几个 class 拼出来，得拆成独立的响应式容器，而不是强求一个类解决所有断点问题。
