直接在Card标题元素上添加text-start text-md-center类即可实现小屏居中、大屏居左；需避免父容器设置text-align覆盖，且不可混用冲突类如text-center text-md-start。
用 Bootstrap 的响应式文本对齐类控制 Card 标题对齐
直接加 text-start text-md-center 到标题元素上即可。bootstrap 5+ 内置的响应式文本对齐类按断点分层，text-start 对应所有尺寸（包括 xs），text-md-center 从 md（768px）起生效，正好满足“大屏居左、小屏居中”的需求。
-
text-start是 Bootstrap 5+ 推荐写法（替代旧版text-left），语义更中性，兼容 RTL - 别用
text-sm-center——它在sm（576px）就触发，会导致平板横屏也居中，不符合“大屏才居左”的要求 - 如果 Card 标题是
，直接加类就行，无需额外 wrapper
Card 标题对齐失效？检查父容器是否覆盖了 text-align
常见失效原因是父级（比如 .card-header 或自定义 div）设置了 text-center 或内联 style="text-align:center"，会强制子元素继承。响应式类的优先级不敌显式设置的 text-align。
- 用浏览器开发者工具检查标题元素 computed 样式里的
text-align值，确认来源 - 若父容器必须居中（如整个 header 需居中），就把对齐类移到标题本身，并确保父容器没设
text-align - 避免在 Card 标题上同时写
text-center text-md-start——逻辑冲突，后写的类会覆盖前一个
需要更精细断点？用自定义 CSS 覆盖或扩展
Bootstrap 默认断点（md 起）不够细？比如想在 992px（lg）才切回居左，小屏到平板都居中，那就得手动补。
- 加类
text-center text-lg-start：小屏到平板（ - 不想依赖 Bootstrap 断点？写一行自定义 CSS：
@media (max-width: 767.98px) { .card-title-mobile-center { text-align: center !important; } }然后给标题加class="card-title-mobile-center" - 注意
!important仅在必要时用——比如第三方组件库样式干扰严重
Flex 布局方式不推荐用于纯标题对齐
有人试图用 d-flex justify-content-center justify-content-md-start 包裹标题，这反而引入多余 DOM 和 flex 行为（比如换行、基线对齐问题），还可能破坏 Card 内部默认间距流。
- 文本对齐是
text-align的本职工作，用响应式类最轻量、最符合语义 - 只有当标题需配合图标/徽章做复杂水平分布时，才考虑 flex；单纯左右/居中切换，别绕路
- Card 标题默认是块级元素，
text-align完全可控，无需 flex 干预
实际最简写法就是：我的标题
text-center，结果调半天发现是继承搞的鬼。
