Bootstrap 5 不支持原生响应式文本颜色类（如 .text-md-primary），因其设计哲学强调颜色的语义性而非单纯响应尺寸；实际需通过手动媒体查询、Sass 断点变量复用或 JavaScript 动态切换实现。
Bootstrap 5 怎么用响应式文本颜色类
Bootstrap 5 没有内置的 .text-{breakpoint}-{color} 响应式文本颜色类（比如 .text-md-primary），这点和栅格系统或字体大小类不同——它**不支持直接按断点切换文本颜色**。你不能靠一个 class 同时实现“小屏黑色、大屏蓝色”这种效果。
为什么原生不支持？
官方认为文本颜色通常与语义强相关（如 .text-danger 表示错误），而不是单纯响应屏幕尺寸；同时，颜色变更往往伴随内容逻辑或交互变化，更适合用媒体查询控制。
常见误解是把 .text-{color} 和断点组合（如 .text-lg-success）当成有效 class，结果发现完全不生效——因为 Bootstrap CSS 中根本没生成这些选择器。
实际可行的三种做法
要实现“不同屏幕下文本颜色不同”，得绕过原生限制，选一种务实方案：
-
手动写媒体查询：最可控，推荐用于少量定制。例如：
@media (min-width: 992px) { .my-responsive-text { color: #0d6efd !important; } }然后在 HTML 中用<span class="text-dark my-responsive-text">文字</span>，小屏走.text-dark，大屏覆盖为蓝色。 -
利用 Bootstrap 的断点 Sass 变量复用：如果你用 Sass 编译项目，可直接引用
$grid-breakpoints，避免硬编码像素值。例如：@include media-breakpoint-up(md) { .text-md-primary { color: $primary !important; } }再编译进 CSS，就能安全使用.text-md-primary。 -
用 JavaScript 动态切换 class：仅限需要运行时判断的场景（比如根据窗口 resize 实时响应）。但要注意性能，别在
resize里直接操作 DOM 颜色，建议节流 + 切换预设 class。
容易踩的坑
很多人试图复制栅格类的命名习惯，写出 .text-sm-muted 或 .text-xl-warning，结果样式无效——Bootstrap 的 CSS 文件里压根没定义这些规则，浏览器自然忽略。
另外，!important 在自定义媒体查询中经常必要，因为 Bootstrap 的 .text-* 类优先级较高；但过度依赖 !important 会让维护变难，建议只在明确覆盖时使用。
真正要小心的是：响应式颜色不是“加个断点前缀就完事”，它本质是设计决策——小屏深色是否影响可读性？大屏高亮是否干扰信息层级？这些比 class 写法更值得花时间确认。
