Bootstrap 5 中 text-{breakpoint}-{size} 类需按断点升序声明（如 text-sm text-lg），因后定义类覆盖前类；必须添加 viewport meta 标签，且避免祖先元素设置 font-size 干扰 rem 计算。
text-sm / text-lg 这类类名在 Bootstrap 5 中怎么用才不踩坑
Bootstrap 5 的响应式文本大小不是靠媒体查询手动写，而是通过预设的 text-{breakpoint}-{size} 类组合控制。关键点在于：断点前缀必须紧跟在 text- 后面，且只对指定断点及更大屏幕生效——text-sm 实际作用于 sm 及以上（≥576px），不是“仅在小屏生效”。
常见错误是以为 text-md 能覆盖中屏、text-lg 覆盖大屏，结果发现小屏文字反而变小了。这是因为类名叠加时，后声明的类会覆盖前面的（CSS 层叠顺序），而 Bootstrap 的断点类按 xs→sm→md→lg→xl→xxl 顺序定义，所以 text-sm text-lg 最终只保留 lg 效果（因为 text-lg 定义在后面）。
-
text-sm：适用于 ≥576px；想让小屏用小字、大屏放大？得写text-xs text-sm text-md text-lg逐级覆盖（但不推荐，冗余且难维护） - 真正可控的做法是只写一个“基础大小” + “向上增强”，比如
text-base text-lg-lg（Bootstrap 5 没有text-base，默认是font-size: 1rem，所以直接写text-lg表示从lg起放大） - 别混用
fs-*（固定尺寸类）和text-*-*（响应式尺寸类），它们来源不同：fs-4是固定值，text-lg-h6是响应式标题语义类，行为不一致
为什么加了 text-xl 却没变大？检查是否漏了 viewport meta
响应式类依赖视口宽度判断断点，如果页面没加 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会以桌面宽度渲染（如 980px），导致 xl（≥1400px）永远不触发，text-xl 看起来完全无效。
另一个常见原因是父容器设置了 font-size，而 Bootstrap 的 text-* 类用的是 em 或 rem 单位——比如父元素 font-size: 0.875rem，那么 text-xl（默认 1.25rem）实际计算为 1.25 × 0.875rem ≈ 1.09rem，可能比预期小。
- 用浏览器开发者工具检查最终计算出的
font-size值，而不是只看 class 是否存在 - 避免在祖先元素上随意设置
font-size，尤其不要用%或em往下传递 - 如果必须定制基础字号，优先改
:root的--bs-body-font-size变量，而非直接覆盖html或body
自定义响应式字体大小：用 CSS 变量 + @media 替代硬编码
Bootstrap 内置的 text-* 类只有 6 级（xs–xxl），且尺寸是固定步进（0.75rem, 0.875rem, … 1.5rem）。真要适配折叠屏或超宽屏，或者需要非线性变化（比如小屏 16px、中屏 18px、大屏直接跳到 24px），就得自己写媒体查询。
推荐方式是复用 Bootstrap 的断点变量，保持一致性：
@include media-breakpoint-up(md) {
.my-text-responsive {
font-size: clamp(1rem, 4vw, 1.5rem);
}
}
@include media-breakpoint-up(xl) {
.my-text-responsive {
font-size: 1.75rem;
}
}
- 别直接复制 Bootstrap 的断点像素值（如
@media (min-width: 992px)），用media-breakpoint-up()混合宏，方便未来统一调整断点配置 -
clamp()在支持的浏览器里很实用，但注意 Safari 旧版（≤13.1）不支持，需加font-size: 1.5rem回退 - 自定义类名别起成
text-custom-xl，容易和原生类混淆；用语义化命名如heading-hero更清晰
text-capitalize 和 text-lowercase 在中文里完全没用
这两个类依赖 CSS 的 text-transform，只对 ASCII 字母起作用。给中文、日文或数字加 text-capitalize，页面不会报错，但也不会有任何视觉变化——这是设计使然，不是 bug。
如果你看到“中文首字母大写”需求，本质是业务逻辑（比如人名、地名格式化），必须后端处理或 JS 处理，不能靠 CSS 类解决。
- 前端做简单规则（如“每段首个汉字转大写”）可用
String.prototype.replace()配合正则，但要注意标点、括号、英文混排场景 - 服务端返回前就格式化好更稳妥，避免客户端重复计算
- 千万别为了“看起来像生效了”而在中文外层包一层
<span>强制加text-uppercase——既无效又增加 DOM 负担
