Bootstrap 5原生支持响应式文本颜色类，格式为text-{breakpoint}-{color}，如text-md-primary表示md及以上断点生效，需严格按sm/md/lg/xl/xxl顺序叠加类实现多断点配色。
Bootstrap 5 中用响应式文本颜色类控制断点颜色
Bootstrap 5 原生支持按断点切换文本颜色，无需写 CSS，直接用内置的响应式颜色工具类即可。关键在于类名结构：以 text-{breakpoint}-{color} 形式组合，比如 text-md-primary 表示在 md 及以上断点显示主色，更小屏幕则回退到默认（或上一级定义）颜色。
- 必须使用 Bootstrap 5+，4.x 不支持这种响应式写法（
text-sm-muted在 v4 是无效的） - 断点前缀顺序必须严格遵循 Bootstrap 的断点定义：
sm、md、lg、xl、xxl，不能跳写（如text-lg-danger text-xl-success合法；text-sm-danger text-lg-success也合法，但text-lg-danger text-sm-success会失效——后者会被前者覆盖且无回退逻辑） - 颜色值必须是 Bootstrap 已定义的语义色：
primary、secondary、success、danger、warning、info、light、dark、body、mute等，自定义色需额外定义 CSS 变量或类 - 如果只写一个响应式类（如仅
text-lg-primary），它只在lg及以上生效，xs/sm/md下无样式，文字将继承父级或浏览器默认颜色——这不是 bug，是设计行为
如何让文字在 md 断点变蓝、xl 断点变红
这是最典型的多断点配色需求。正确写法是叠加两个类，利用 Bootstrap 的“最小断点生效 + 向上覆盖”机制：
<p class="text-md-primary text-xl-danger">这段文字在中屏及以上是蓝色，超大屏起变成红色</p>
注意：text-md-primary 在 md、lg、xl、xxl 都生效；text-xl-danger 覆盖其中 xl 和 xxl 的表现。不要写成 text-md-primary text-lg-danger 并期望 lg 才变色——那样 md 屏其实已变色，不符合“仅从 lg 开始”的意图。
为什么加了 text-sm-muted 却没生效
常见原因有三个：
- 页面未加载 Bootstrap 5 的 CSS，或加载的是 v4 版本（v4 不识别响应式文本颜色类）
- 元素本身有更高优先级的内联样式或自定义 CSS（如
style="color: #000"），会强制覆盖工具类 - 断点阈值未触发：Bootstrap 的
sm断点起始宽度是576px，若你在 575px 宽度测试，text-sm-muted就不会激活——它只对 ≥576px 生效，不是“小于 md”
需要深灰（#333）或品牌紫怎么办
Bootstrap 没预设这些颜色，但不用全写 CSS。推荐两种轻量方案：
- 用
text-[breakpoint]-[custom]+ 自定义 CSS 变量：在:root或html中定义--bs-text-purple: #6a0dad，再加一条规则.text-md-purple { color: var(--bs-text-purple) !important; } - 直接复用 Bootstrap 的颜色系统扩展：在 Sass 中修改
$theme-colorsmap，加入purple: #6a0dad，重新编译 CSS，之后就能用text-md-purple
别为了单个颜色去写一堆媒体查询——那反而破坏了 Bootstrap 响应式工具类的设计初衷。真正麻烦的从来不是加颜色，而是忘记断点生效方向是“向上覆盖”，不是“向下继承”。
