应使用text-center text-md-start组合，即小屏居中、中屏及以上左对齐；类必须直接加在card-title元素上，且断点类需后置以确保覆盖生效。
用Bootstrap的响应式文本类控制Card标题对齐
直接在 card-title 元素上叠加多个响应式文本对齐类即可，不需要写css或js。bootstrap 5内置的 text-start、text-center 等类支持断点前缀，能按屏幕尺寸自动切换。
-
text-start对应小屏（xs）默认左对齐，但我们要的是“大屏左、小屏中”，所以得用带断点的变体 - 关键组合是：
text-md-start text-center—— 表示从md（768px）起左对齐，md以下（即sm和xs）居中 - 注意顺序：后面类会覆盖前面类，所以把更具体的断点类放后面（
text-md-start放在text-center后面才生效）
Card标题HTML结构怎么写才有效
必须把对齐类加在包裹标题内容的元素上，通常是 <h5 class="card-title"> 本身。如果标题被额外 <div> 或 <p> 包裹，类要加在那个容器上，否则无效。
<div class="card">
<div class="card-body">
<h5 class="card-title text-center text-md-start">我的标题</h5>
<p class="card-text">正文内容...</p>
</div>
</div>
- 不要写成
text-sm-center text-md-start——sm断点（576px）比md小，这样会导致sm居中、md左对齐，但xs（ - 真正覆盖所有小屏的是无前缀的
text-center（等价于text-xs-center），它作用于所有断点，再用text-md-start覆盖md+
为什么用 text-md-start 而不是 text-lg-start
因为“大屏”在实际项目中通常指平板及以上（≥768px），也就是 md 断点。用 lg（≥992px）会导致在 iPad 横屏（768–991px）时仍居中，违背设计意图。
- Bootstrap 默认断点：
xs（sm（≥576px）、md（≥768px）、lg（≥992px） - 手机竖屏（
xs）和横屏（sm）都应居中，所以基础类选text-center；从md开始左对齐，符合主流响应式布局习惯 - 如果产品明确要求仅在桌面屏（≥992px）左对齐，其他都居中，才用
text-center text-lg-start
遇到标题没对齐？先检查这三件事
这类问题几乎全是类名应用位置或优先级问题，极少是Bootstrap版本bug。
- 确认用了 Bootstrap 5+ ——
text-start/text-center在 Bootstrap 4 是text-left/text-center，混用会导致失效 - 检查是否被其他CSS强制覆盖，比如自定义样式写了
.card-title { text-align: left !important; }，会干掉响应式类 - 验证元素是否真的渲染了——有些框架（如Vue/React）动态生成卡片时，可能漏传 class，用浏览器开发者工具看最终DOM上有没有那几个类
断点行为不生效时，别急着查文档，先打开控制台切到不同设备宽度，看对应类是否被正确应用，再反推是写法问题还是环境问题。
