正确组合是text-center text-md-start，小屏居中、大屏左对齐；text-center兜底所有断点，text-md-start从768px起覆盖居中效果，确保iPad横屏及桌面屏左对齐。
text-center text-md-start 是正确组合
小屏居中、大屏左对齐，直接用 text-center text-md-start 就行。其中 text-center 作用于所有断点（等价于 text-xs-center），确保手机竖屏、横屏都居中；text-md-start 从 ≥768px（md 断点）起生效，覆盖前面的居中效果，让平板横屏及桌面屏全部左对齐。
常见错误写法包括：text-sm-center text-md-start（sm 断点 576px 就居中，但 xs 尺寸无定义，实际是左对齐）、text-md-center（只在 ≥768px 居中，小屏回退到浏览器默认左对齐）、text-center text-md-center（后一个类不改变行为，纯冗余）。
-
text-center是兜底类，不能省 - 别用
text-lg-start替代text-md-start：iPad 横屏宽度约 768–1024px，若用 lg（≥992px），会导致 iPad 横屏仍居中，不符合“大屏左对齐”设计意图 - 类名顺序不影响生效逻辑——Bootstrap 工具类优先级一致，靠媒体查询范围决定，不是靠 CSS 书写顺序覆盖
类必须加在容器上，不是加在 card-title 标签本身
card-title 是语义类，只控制字体粗细和上下间距，不控制对齐方式。真正起作用的是包裹它的容器，比如 card-header 或自定义 div。
正确写法示例：
<div class="card"> <div class="card-header text-center text-md-start">我的标题</div> <div class="card-body"><p>内容</p></div> </div>
错误写法示例：<h5 class="card-title text-center text-md-start">标题</h5> —— 在多数主题或自定义样式下不可靠，且可能被父容器的 text-align 覆盖。
- 如果卡片结构没用
card-header，就包一层<div class="text-center text-md-start">...</div> - 避免在同一个元素上同时写
text-*和justify-content-*，它们机制不同，容易互相掩盖
Flex 布局会干扰 text-* 类生效
如果 card-header 或其父容器设置了 d-flex 或 justify-content-*，那么 text-center 这类文本对齐类将失效——因为 flex 子项的水平对齐由 justify-content 控制，而非自身 text-align。
检查方式：打开浏览器开发者工具，看该元素的 computed display 是否为 flex；如果是，text-* 就不起作用。
- 解决方案一：删掉父级的
d-flex或justify-content-* - 解决方案二：改用 flex 方式控制对齐，例如
justify-content-center justify-content-md-start - 解决方案三：若必须保留 flex（比如要右对齐操作按钮），把标题单独抽成
<div class="flex-grow-1"><h5 class="text-center text-md-start">标题</h5></div>
容易被忽略的继承与覆盖问题
最常踩的坑不是类名写错，而是父容器显式设置了 text-align: center 或内联样式，或者用了第三方组件库自带的全局 text-center 规则——这些会硬覆盖响应式类，导致断点失效。
验证方法：在开发者工具中查看标题元素的 computed text-align 值，确认来源是 Bootstrap 的媒体查询，而不是父级继承或内联样式。
- 别依赖
!important解决——它只是掩盖问题，不是定位根源 - 不要在卡片整体（
card或card-body）上加text-center，否则整个卡片内容都会居中 - 如果项目已升级到 Bootstrap 6 alpha，类名可能变为
text-sm-center等，但当前主流仍是 5.x，以md为分界最稳妥
