正确做法是使用text-center text-md-start组合：text-center作为兜底类作用于所有断点确保小屏居中，text-md-start从≥768px起生效覆盖为左对齐；类必须加在card-header等容器上，而非card-title标签本身。
用 text-center text-md-start 组合实现小屏居中、大屏左对齐
这是最直接有效的写法，不需要额外 CSS 或 JS。text-center 作用于所有断点（等价于 text-xs-center），确保手机竖屏、横屏都居中；text-md-start 从 md（≥768px）起生效，覆盖前面的居中效果，让平板横屏、桌面屏全部左对齐。
关键点：
-
text-center是“兜底类”，必须写在前面或后面都行，但不能省 - 别用
text-sm-center text-md-start：它会让 ≤576px 回退到浏览器默认左对齐，小屏不居中 - 别用
text-md-center单独控制——它只在 ≥768px 居中，小屏无定义，实际是左对齐 - 断点类顺序不影响生效逻辑，CSS 同权重下后写的会覆盖前写的，但 Bootstrap 工具类优先级一致，靠媒体查询范围决定
类必须加在容器上，不是加在 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>
常见错误：
- 把
text-center text-md-start直接加在<h5 class="card-title"></h5>上 → 失效，尤其当父容器是 flex 布局时 - 父容器（如
card-header）本身设置了text-align: center内联样式 → 硬覆盖响应式类，断点失效 - 父容器是
d-flex，却还用text-*类 → flex 容器里文本对齐类无效，得换justify-content-*
遇到对齐没变化？先查这三处
90% 的问题出在 DOM 结构或样式干扰，不是类名写错。
- 打开浏览器开发者工具，检查标题所在元素的 computed
text-align值，看来源是 Bootstrap 类、父级继承，还是自定义 CSS 或内联样式 - 确认该元素的父容器 display 是否为
flex：如果是，text-*类完全不生效，要改用justify-content-center justify-content-md-start并确保容器有d-flex - 检查是否漏传 class：Vue/React 动态渲染时，可能因条件判断没加上那两个类，DOM 里根本没出现
text-center或text-md-start
需要更细粒度断点（比如只在 lg 才左对齐）怎么办
Bootstrap 默认断点 md（768px）已覆盖主流“大屏”场景（iPad 横屏及以上）。如果产品明确要求仅在 ≥992px（lg）才左对齐，小屏到平板都居中，就换成：
<div class="card-header text-center text-lg-start">标题</div>
注意：
- 别用
text-sm-center text-lg-start：它会让 sm（576px）起就居中，而 xs（ - 如果项目自定义了断点，或用了 Sass 变量修改了
$grid-breakpoints，响应式类行为会随之变化，需同步验证 - 真要跨断点多次切换（如 xs 左、sm 中、md 右），可用
text-start text-sm-center text-md-end，但务必测试每个断点宽度下的实际表现
text-center text-md-start 加在 card-header 上。容易被忽略的是：很多人调了半天发现标题还是左对齐，结果是父容器写了 text-center 或 d-flex，而自己只盯着标题标签改类。
