正确做法是使用text-center text-sm-start：小屏（xs）默认居中，中屏（≥576px）起左对齐；因Bootstrap 5移除xs前缀，text-center等价于text-xs-center，且后写的text-sm-start会覆盖同属性的前面类。
Card标题响应式对齐：用Bootstrap内置工具类直接控制
bootstrap 5 的 text-start / text-center 已支持响应式断点，无需写css或js就能实现“大屏左对齐、小屏居中”——关键在于选对断点前缀。
常见错误是直接用 text-center（它作用于所有尺寸），或误用 text-md-center（这会让中屏及以上都居中，不符合“大屏左、小屏中”的需求）。
-
text-center→ 所有尺寸都居中（❌ 不符合要求） -
text-sm-center→ 小屏（≥576px）起居中，但中屏及以上也居中（❌ 覆盖过宽） -
text-md-start→ 中屏（≥768px）起左对齐，小屏默认继承上一级（即无类时为左对齐）→ ❌ 还是没解决小屏居中
正确做法是：让小屏（xs）居中，中屏及以上（sm 及之后）左对齐：
<div class="card">
<div class="card-header text-center text-sm-start">
卡片标题
</div>
<div class="card-body">...</div>
</div>
为什么用 text-center text-sm-start 而不是 text-xs-center text-sm-start
Bootstrap 5 移除了 xs 前缀，text-center 默认作用于 xs（即最小断点），等价于 text-xs-center；而 text-sm-start 表示从 sm（≥576px）开始生效，并覆盖更小尺寸的样式。
它的优先级和层叠逻辑是：后写的类会覆盖前面同类型属性。所以 text-sm-start 在 sm 及以上生效时，会覆盖 text-center 的居中效果。
- 屏幕宽度 text-center，居中
- 屏幕宽度 ≥ 576px（sm）→
text-sm-start生效，左对齐 - 无需额外类控制 md/lg/xl，因为
text-sm-start持续生效
如果用了 card-title 类，需要额外处理吗？
不需要。Bootstrap 的 card-title 是语义类，只设字体加粗和上下边距，不设对齐方式，所以对齐仍由 text-* 类控制。
但注意：如果卡片标题是 <h5 class="card-title"></h5>，且父容器（如 card-header）没设对齐类，那对齐将依赖 h5 自带的浏览器默认样式（通常是左对齐）。所以必须把 text-center text-sm-start 加在包含标题的容器上（比如 card-header 或直接包一层 div），而不是加在 card-title 上。
错误写法：<h5 class="card-title text-center text-sm-start">标题</h5> → 无效，因为 card-title 本身没有 display: block 外的布局约束，且部分主题可能重置了 h5 的 margin/padding，导致对齐不可靠。
自定义断点或更精细控制（比如仅在 lg 居左）
如果需求变成“xs/sm/md 居中，lg+ 居左”，就换成 text-center text-lg-start。原理一样：利用断点类的覆盖机制。
但要注意兼容性：所有断点类（text-sm-*, text-md-*, text-lg-*）在 Bootstrap 5 中默认启用，除非你手动禁用了某断点（通过 Sass 变量 $grid-breakpoints），否则无需额外配置。
性能无影响，这些是纯 CSS 类，无 JS 开销，也不触发重排。
容易被忽略的是：如果项目里引入了旧版 Bootstrap（如 4.x），text-sm-start 不存在，得用 text-sm-left ——但题干明确是 Bootstrap，按 5.x 处理；若实际环境是 4.x，需先确认版本再替换类名。
