正确做法是使用text-center text-md-start类组合：text-center使小屏居中，text-md-start从768px起左对齐，覆盖小屏设置，实现“小屏居中、大屏左对齐”。
Card标题响应式对齐的CSS类组合
Bootstrap本身没有直接叫 text-center-sm-start 这种“反向断点”的类，所以不能靠单个类一步到位。得用断点组合：大屏用 text-center，小屏（默认）用 text-start，但要注意默认行为和覆盖顺序。
- Bootstrap 5+ 中，
text-start是默认左对齐，无需显式写；真正要加的是大屏居中 —— 所以只需在标题元素上加text-center text-md-start -
text-md-start从md（768px）起生效，覆盖掉text-center，从而实现「≥md 居中，- 别用
text-sm-start：因为sm断点（576px）太早，会导致平板也左对齐，不符合“手机端左对齐、大屏居中”的需求 - 别用
写在Card-title上的正确class写法
直接作用于 card-title 元素即可，不需要额外包裹或JS。注意类名顺序无关紧要，Bootstrap按断点权重覆盖（md > 无断点）。
<div class="card">
<div class="card-body">
<h5 class="card-title text-center text-md-start">我的标题</h5>
<p class="card-text">内容...</p>
</div>
</div>
- 如果标题是
<h3>或其他标签，同样适用 —— 只要加这组class - 避免同时写
text-center text-lg-center：这不会增强效果，反而冗余 - 不要用
text-center text-sm-start：它会让 ≥576px 的设备（比如小平板）就左对齐，跳过了“大屏居中”目标
为什么不用CSS媒体查询手动写？
可以写，但没必要。Bootstrap的断点类已编译好、零额外体积、语义清晰。自己写媒体查询容易漏掉 min-width 边界或单位错误，还可能和Bootstrap的 container / grid 断点不一致。
- Bootstrap的
md对应@media (min-width: 768px)，和大多数设计稿的“平板分界”吻合 - 若项目已引入Bootstrap CSS，重复写
@media (min-width: 768px) { .card-title { text-align: left; } }属于冗余维护 - 自定义CSS需确保选择器权重不低于Bootstrap（比如加
!important就是信号不良）
遇到标题文字过长换行后不对齐怎么办？
纯文本居中/左对齐没问题，但若标题含 badge、图标或 flex 子元素，text-* 类可能失效 —— 因为它们只作用于内联内容，不控制子元素布局。
- 检查是否用了
card-title d-flex或内部嵌了span+ms-auto等布局类，这些会覆盖文本对齐 - 简单解法：移除干扰布局类，或把对齐逻辑移到父容器（如给
card-body加text-md-center，再用text-start覆盖小屏） - 极端情况（如标题含浮动元素），改用
justify-content-center+justify-content-md-start配合d-flex，但这就超出纯文本对齐范畴了
断点对齐看着简单，实际常卡在断点选错或嵌套布局干扰上 —— 优先验证你用的断点是否真对应目标设备宽度，再查有没有 flex / float / position 抢走了对齐控制权。
