正确组合是text-center text-md-start，小屏居中、大屏左对齐；text-center作用于所有断点确保xs/sm居中，text-md-start从≥768px起覆盖居中实现左对齐。
text-center text-md-start 是正确组合，不是可选方案
小屏居中、大屏左对齐必须用 text-center text-md-start，不是“试试看哪个顺眼”。text-center 作为基础类作用于所有断点（等价于 text-xs-center），确保手机竖屏（0–575.98px）和横屏（576–767.98px）都居中；text-md-start 从 ≥768px 开始生效，覆盖前面的居中效果，让平板横屏、桌面屏全部左对齐。
常见错误写法包括：
-
text-sm-center text-md-start：sm 断点（≥576px）就居中，导致 iPad 横屏仍居中，而你想要的是“大屏才左” -
text-md-center：只在 ≥768px 居中，xs/sm 回退到浏览器默认左对齐，小屏根本没居中 -
text-center text-lg-start：lg（≥992px）才左对齐，但 iPad 横屏（768–991px）仍居中，不符合“大屏左”的实际边界
类必须加在容器上，不是加在 card-title 元素本身
card-title 类只控制字体、粗细和上下间距，不参与对齐逻辑。真正起效的是包裹它的容器，比如 card-header 或自定义 div。
✅ 正确写法：
<div class="card">
<div class="card-header text-center text-md-start">
<h5 class="card-title mb-0">我的标题</h5>
</div>
<div class="card-body"></div>
</div>
❌ 错误写法（尤其在 flex 容器或重置样式下极易失效）：
<h5 class="card-title text-center text-md-start">我的标题</h5>
如果卡片没用 card-header，就手动包一层 <div class="text-center text-md-start">...</div>，别图省事直接怼到 h5 上。
Flex 布局会彻底禁用 text-* 类
一旦父容器（如 card-header）被设为 d-flex，子元素的 text-align 就完全失效——因为 flex 项的水平对齐由 justify-content 控制，不是 text-align。
遇到对齐没变化？先检查这三处：
- 用浏览器开发者工具查看该容器的
computed display是否为flex - 若确实是 flex，把
text-center text-md-start换成justify-content-center justify-content-md-start - 如果容器还要放按钮/图标（比如
justify-content-between），就把标题抽成独立块：<div class="flex-grow-1"><h5 class="text-center text-md-start">标题</h5></div>
容易被忽略的继承与覆盖问题
响应式类优先级敌不过显式设置的 text-align。哪怕父级（如 .card 或某个 wrapper）只写了 style="text-align: center"，就会硬覆盖掉所有 text-* 工具类。
排查步骤：
- 打开 DevTools，选中标题所在容器，看
computed text-align的值和来源 - 检查是否有内联样式、第三方 CSS 或自定义主题写了
text-align: left !important - 确认 Vue/React 渲染时是否漏传了 class——DOM 里根本没出现
text-center或text-md-start
断点行为是“最小宽度触发”，不是“区间限定”。text-md-start 一旦生效（≥768px），就持续作用于 lg/xl/xxl，不需要额外补 text-lg-start。真正要小心的，是那些你以为“只在 md 生效”的错觉。
