正确做法是使用text-center text-md-start组合：text-center作为兜底类确保小屏居中，text-md-start从≥768px起生效覆盖为左对齐；类必须加在card-title等标题标签上，而非card-header容器。
用Bootstrap的响应式文本对齐类控制标题位置
直接用 text-start + text-center 组合就能实现：大屏左对齐、小屏居中。Bootstrap 5 的响应式文本类会按断点自动切换，不需要写CSS或JS。
常见错误是只加 text-center，结果所有屏幕都居中；或者误用 text-lg-left（这是Bootstrap 4旧语法，5里已废弃）。
-
text-start对应默认（xs）断点，即最小屏也左对齐，但我们要的是“小屏居中”，所以它得放在后面覆盖 - 正确顺序是：
text-center text-md-start—— 小屏（xs/sm）用text-center，中屏及以上（md+）覆盖为text-start - 注意断点选择：
md是最常用分界，因为卡片标题通常在平板横屏（768px）开始才需要左对齐；若想更早切（比如600px），可用text-sm-start
Card标题HTML结构中怎么加这些类
类必须加在标题元素（如 <h5> 或 <div class="card-title">）上，不是加在 <div class="card"> 或 <div class="card-header"> 上——后者会影响整个区域，可能破坏内边距或背景色布局。
示例：
<div class="card">
<div class="card-body">
<h5 class="card-title text-center text-md-start">我的标题</h5>
<p class="card-text">内容...</p>
</div>
</div>如果标题在 <div class="card-header"> 里，同样把类加到内部标题标签上，不要加到 card-header 容器本身。
为什么不用CSS媒体查询手动写？
可以写，但没必要。Bootstrap的 text-* 类底层就是用标准媒体查询实现的，且已做前缀兼容和min-width逻辑，比手写更稳。
手写容易踩的坑：
- 漏写
@media (min-width: 768px)中的min-width，导致样式在小屏也生效 - 用
text-align: center覆盖时没加!important，被Bootstrap内置样式优先级压住 - 断点值写错，比如用
992px却忘了Bootstrap 5的lg是992px起，而你只想从768px切，该用md
其他类似场景要不要套用同一套逻辑
要。所有纯文本对齐需求（按钮文字、段落、列表项）都适用 text-* text-{breakpoint}-* 这个模式。
但注意：如果卡片用了 flex 布局（比如 card-header d-flex justify-content-between），再单独设标题对齐可能失效——此时标题是flex子项，text-center 不起作用，得改用 justify-content-center 或 mx-auto 等flex属性。
也就是说，对齐方式是否生效，取决于父容器的display类型。先看父级是不是flex/grid，再决定用文本类还是布局类。
