text-center text-md-start可实现小屏居中、大屏左对齐，因text-center作用于xs断点，text-md-start从md（≥768px）起覆盖并生效，符合移动端优先覆盖逻辑。
Card标题响应式对齐的CSS类组合
Bootstrap本身没有直接提供“大屏左对齐、小屏居中”的单一类，得靠text-start和text-center配合断点类组合实现。关键不是写新CSS，而是理解类的覆盖逻辑：后面写的断点类会覆盖前面的，且移动端优先（mobile-first）。
-
text-start在最小断点（xs）生效，但会被后续断点覆盖 - 加
text-center会让所有屏幕都居中——这不对，必须限定断点 - 正确写法是：
text-start text-sm-center text-md-start text-lg-center？不，太绕。最简方案是：text-start text-md-center -
text-md-center表示从md（768px）起居中，但你要的是“大屏居左、小屏居中”，所以反过来：用text-center text-md-start
为什么text-center text-md-start才符合需求
因为Bootstrap的断点类按xs→sm→md→lg→xl→xxl顺序覆盖，text-center默认作用于xs，text-md-start从md（≥768px）开始生效并覆盖它。这样：xs/sm屏标题居中，md+屏左对齐——正好是你想要的。
别写成text-sm-center text-md-start，否则sm（576–767px）居中，xs（
直接用在Card标题上的写法
假设你用的是Bootstrap 5.x的<h5 class="card-title">：
<div class="card">
<div class="card-body">
<h5 class="card-title text-center text-md-start">我的标题</h5>
<p class="card-text">内容...</p>
</div>
</div>
注意：不要把对齐类加在card或card-body容器上，否则会影响整个卡片内容；必须精准落在card-title元素上。
- 如果标题用了
<div class="card-header">，同样加text-center text-md-start到该div上 - 若项目已升级到Bootstrap 6 alpha，类名可能变为
text-sm-center等，但目前主流仍是5.x，以md为分界稳妥 - 避免用
!important或自定义CSS，除非你明确要打破Bootstrap的响应式链
容易被忽略的Flex布局干扰
如果你给card-body或card加了d-flex或justify-content-*类，text-*对齐可能失效——因为Flex子项的文本对齐受父容器主轴对齐控制，而非自身text-align。
此时要么删掉父级Flex相关类，要么改用Flex方式控制标题对齐：
<div class="card-body d-flex flex-column"> <h5 class="card-title align-self-start align-self-md-center">我的标题</h5> </div>
align-self-start对应左对齐，align-self-md-center在md+时居中，逻辑一致，但适用场景不同——仅当父容器已是Flex时才用这套。
多数情况下，老老实实用text-center text-md-start最省事，也最不容易和其他样式冲突。
