正确组合是text-center text-md-start：xs至sm屏居中，md及以上屏左对齐；类须加在容器上而非card-title本身；需排查父级text-align覆盖及类冲突。
text-center text-md-start 是正确组合
小屏居中、大屏左对齐，必须用 text-center text-md-start。其中 text-center 作用于所有断点（等价于 text-xs-center），确保 xs 尺寸下居中；text-md-start 从 768px 起生效，覆盖前者的居中效果，实现 md 及以上左对齐。
常见错误写法包括：text-sm-center text-md-start（sm 断点起就居中，xs 回退到浏览器默认左对齐，小屏不居中）、text-md-center（大屏也居中）、text-center text-lg-start（iPad 横屏 768–991px 仍居中，不符合“大屏左”的实际需求）。
类必须加在容器上，不是 card-title 元素本身
card-title 类只控制字体和间距，不控制对齐；真正生效的是包裹它的容器，比如 card-header 或外层 div。
- ✅ 正确：
<div class="card-header text-center text-md-start"><h5 class="card-title">标题</h5></div> - ❌ 错误：
<h5 class="card-title text-center text-md-start">标题</h5>（在 flex 容器或重置样式下极易失效） - 若
card-header已是d-flex，text-*类对子元素无效，此时需改用justify-content-center justify-content-md-start或抽离标题为独立块级容器
父容器的 text-align 会覆盖响应式类
响应式文本类优先级低于显式设置的 text-align，哪怕只是内联样式或第三方 CSS 中的一行 text-align: left !important，都会让 text-center text-md-start 彻底失效。
排查步骤：
- 打开浏览器开发者工具，选中标题容器，看 computed 样式中
text-align的值和来源 - 检查父级（如
.card、.card-body或自定义 wrapper）是否写了text-center或style="text-align:center" - 确认没有混用冲突类，例如
text-center text-md-start text-end—— 后写的会覆盖，但逻辑混乱易出错
断点行为是“最小宽度触发”，不是“区间限定”
Bootstrap 的响应式类（如 text-md-start）只在对应断点及更大尺寸生效，不会自动“关闭”更小尺寸的类。所以 text-center text-md-start 的含义是：
- 0–767.98px：
text-center生效 → 居中 - ≥768px：
text-md-start生效 → 覆盖居中，变为左对齐，并持续作用于 lg/xl/xxl
别指望它“只在 md 生效”，它一旦触发，就一直有效；也不需要额外写 text-lg-start——除非你明确要求只在 lg+ 左对齐，而 md 屏仍居中。
