模态框主体内容默认左对齐，改居中或右对齐可直接为.modal-body添加Bootstrap 5响应式文本类：居中用text-center，右对齐用text-end；若需小屏左、大屏居中，则用text-start text-lg-center；遇无效情况，常见原因是.modal-body被嵌套在d-flex容器中或内部结构（如form）干扰了text-align生效逻辑。
模态框主体内容默认左对齐，怎么改居中或右对齐？
bootstrap 5 的 .modal-body 默认是块级元素，内部文本走浏览器默认的 text-align: start（即左对齐）。想改对齐方式，直接给 .modal-body 加响应式文本类就行，不用动 css。
- 居中：加
text-center - 右对齐：加
text-end - 小屏左对齐、大屏居中：用
text-start text-lg-center - 混合对齐（比如标题左、按钮右）：不能靠
text-*类实现，得用d-flex justify-content-between布局
注意：text-center 对整个 .modal-body 生效，如果里面嵌了 form 或 table，它们的子元素对齐需单独控制。
为什么给 modal-body 加 text-center 没反应？
常见原因是父容器或内部结构干扰了文本对齐逻辑：
-
.modal-body被包在d-flex容器里（比如有人手动加了class="d-flex"），此时text-align对 flex 子项无效 - 内部用了
form，而form默认是块级但某些重置样式会覆盖对齐 - 用了自定义 class 或第三方组件（如 Vue/React 封装 Modal），把原生 class 覆盖或隔离了
快速验证方法：临时加个 style="border: 1px solid red" 到 .modal-body，看红色边框是否包裹住文字——如果不包，说明它被 flex 或 grid 布局撑开了，text-align 自然失效。
模态框里的表单控件（input/select）怎么左右对齐？
表单控件本身不响应 text-align，它们的对齐由 width 和父容器布局决定：
- 单个
input想居中：把它包进<div class="text-center">，或用 <code>mx-auto d-block - 多个控件想左/右/居中排布：用
form+d-flex+justify-content-start/end/center - label 和 input 想左对齐、右对齐混合：别用
text-*，改用row栅格或d-flex align-items-center配合ms-auto
例如右侧放提交按钮：
<div class="d-flex justify-content-between mt-3"> <button type="button" class="btn btn-secondary">Cancel</button> <button type="submit" class="btn btn-primary">Save</button> </div>
模态框标题（.modal-header）文字对齐和按钮位置冲突怎么办？
.modal-header 默认是 flex 容器，text-center 对它无效——这是最常被忽略的一点。
- 标题居中：去掉
.modal-header上所有 flex 相关 class（如d-flex），只加text-center - 标题左对齐 + 关闭按钮右对齐：保留默认 flex 结构，用
justify-content-between，再给标题加flex-grow-1 text-start - 关闭按钮位置偏高/偏左：别调
top或right，确保用的是<button type="button" class="btn-close"></button>，并确认没额外加position: absolute
复杂点在于：一旦你手动干预了 .modal-header 的 display 或 justify-content，就等于绕过了 Bootstrap 的默认定位逻辑，后续在移动端或缩放视口下容易错位。能不动 layout 就不动，优先用语义类组合。
