bootstrap 5 不支持 text-sm-white 等断点级颜色类，因其 color 和 background-color 工具类无响应式前缀；需用显示类组合（如 d-none d-sm-inline）、自定义 sass 扩展或媒体查询实现响应式颜色切换。
Bootstrap 5 中如何用响应式工具类控制文字颜色和背景色
Bootstrap 5 原生不支持像 text-lg-white 或 bg-md-blue 这样的「断点级颜色类」——这类写法根本不存在，写了也不会生效。所有颜色类（如 text-primary、bg-success）默认作用于所有断点，无法直接响应式切换。
为什么不能直接写 text-sm-white bg-md-dark
因为 Bootstrap 的颜色工具类没有按断点前缀做拆分。它的响应式类只对布局、显示、间距等属性开放断点前缀（如 d-none d-md-block、mt-2 mt-lg-4），但 text-* 和 bg-* 类全部是全局生效的。你加 sm、md 前缀，CSS 不会识别，浏览器直接忽略。
- 尝试写
text-sm-danger→ 浏览器解析为未知类，无样式 - 写
bg-lg-warning→ 同样无效，bg-warning才起作用 - 想让小屏白字黑底、大屏黑字蓝底？必须组合使用显示类 + 多组独立元素，或手写媒体查询
三种可行方案：优先推荐「显示类组合」
最轻量、无额外 CSS、兼容性好。核心思路：用多套 text-*/bg-* 元素，配合 d-{breakpoint}-* 控制显隐。
<div class="d-none d-sm-inline text-white bg-dark">小屏及以上显示：白字黑底</div> <div class="d-sm-none text-dark bg-info">超小屏显示：黑字蓝底</div>
-
d-none d-sm-inline：xs 屏隐藏，sm 及以上显示为行内元素 -
d-sm-none：sm 及以上隐藏，仅 xs 显示 - 两段内容语义一致时，可共用
aria-label避免读屏重复 - 注意：不要在同一个元素上叠加冲突的
text-*类（如text-white text-dark），后声明的会覆盖前一个
自定义响应式颜色类（需编译 Sass 或注入 CSS）
如果项目已用 Sass，可在 _custom.scss 中扩展：
@each $breakpoint, $value in map-get($grid-breakpoints, 'breakpoints') {
@include media-breakpoint-up($breakpoint) {
.text-#{$breakpoint}-primary { color: $primary !important; }
.bg-#{$breakpoint}-light { background-color: $light !important; }
}
}
编译后就能用 text-md-primary、bg-lg-light。但要注意：
- 必须确保
$grid-breakpoints已定义，且变量名与你的断点一致（如sm、md） - 使用
!important是为了覆盖 Bootstrap 原生颜色类的权重，否则可能失效 - 纯 CDN 引入 Bootstrap CSS 的项目无法这样扩展，只能改用内联
style或单独 CSS 文件
真正要落地，得看你是用构建流程还是纯 HTML 引入。没 Sass 就别硬套这个方案，容易卡在编译环节。
