justify-content-* 类必须作用于 display: flex 容器，如 .row 或添加 d-flex 的元素；text-center 仅对行内内容有效，不能居中块级子元素；断点类如 justify-content-md-center 从指定断点起生效并持续至更大屏幕。
justify-content-* 响应式类必须加在 flex 容器上
直接给 .container 或普通 <div> 加 <code>justify-content-md-center 不生效，因为该类只作用于 display: flex 容器。Bootstrap 的 .row 默认是 flex，所以能直接用；但 .nav、.card、<section></section> 这类默认不是 flex，得先加 d-flex。
常见错误：把 justify-content-lg-center 写在父容器（如 <div class="container">）上，期望它居中里面某个 <code>.row —— 实际上它只影响自己的直接子元素，而 .container 是 block，不支持 justify-content。
- ✅ 正确写法：
<div class="row justify-content-lg-center"><div class="col-6">内容</div></div> - ✅ 普通 div 居中：
<div class="d-flex justify-content-md-center"><button>按钮</button></div> - ❌ 错误写法：
<div class="container justify-content-md-center"><div class="row">...</div></div>（类被忽略）
text-center 不能替代 justify-content-center
text-center 只控制行内内容（文字、<span></span>、<img> 等）的水平对齐，对块级子元素（如 <div>、<code><section></section>）无效。想让一个卡片或按钮在父容器里水平居中，text-center 没用 —— 它最多让卡片里的文字居中，卡片本身还在左对齐位置。
典型翻车场景：
- 给
<div class="card text-center"> 加 <code>text-center，结果只有标题和段落居中，卡片框体依然靠左 - 用
text-md-center试图让<div class="d-flex"> 里的按钮居中 → 失效，因为 flex 子项对齐由父容器的 <code>justify-content控制断点前缀生效逻辑是“最小宽度匹配”，不是“仅限该断点”
justify-content-md-center表示「从 md 断点（≥768px）开始生效，并持续作用于 lg、xl、xxl」，不会在 xl 断点自动取消。如果需要「md 居中、xl 改为右对齐」，必须显式叠加：<div class="d-flex justify-content-md-center justify-content-xl-end"> <p>注意顺序无关紧要，浏览器按媒体查询匹配最后一个满足条件的类。但别漏写中间断点覆盖 —— 比如只写 <code>justify-content-sm-center justify-content-xl-end，那 md 和 lg 断点会回退到默认的justify-content-start（左对齐）。- xs（
- sm（≥576px）：
justify-content-sm-center生效 → 居中 - md/lg（≥768px / ≥992px）：若没额外类，则沿用 sm 的居中
- xl（≥1200px）：加
justify-content-xl-end才会切换为右对齐
Modal 标题居中不能靠 text-center
.modal-header是 flex 容器，text-center对它完全无效。想实现「小屏标题左对齐、大屏居中」，只能用 flex 响应式类：<div class="modal-header justify-content-start justify-content-lg-center"> <p>同时保留关闭按钮位置：别删 <code>.btn-close，它依赖justify-content-between结构。稳妥做法是：- 用
justify-content-sm-between justify-content-lg-center - 给
.modal-title加flex-grow-1 text-center（仅当需要标题自身文字居中时） - 避免在
.modal-header上加d-flex—— 它本来就是 flex，重复加可能触发样式冲突
最易被忽略的一点：如果模态框 DOM 被挂载到非
下（比如 Vue 的 teleport 到某个 relative 容器），所有响应式 flex 对齐都可能因父容器约束失效。
