Bootstrap怎么设置不同屏幕下的文本颜色（Text-sm-primary）-Bootstrap教程-PHP中文网

不存在。text-sm-primary不是Bootstrap官方类，因其主题色类（如text-primary）不参与响应式生成，仅语义灰度类（如text-body-secondary）支持text-{breakpoint}-{color}语法。

text-sm-primary 这类响应式文本色类到底存不存在

不存在。text-sm-primary 不是 bootstrap 官方提供的类名。bootstrap 的响应式文本颜色类命名规则是 text-{breakpoint}-{color}，但前提是该 breakpoint 前缀（如 sm、md）必须出现在 color 类之前，且只支持 text-* 中已定义的颜色变体——而 primary 本身是合法 color 名，sm 是合法 breakpoint，组合起来看似合理，实际却**不会生效**。

原因在于：Bootstrap 的响应式文本色类生成逻辑依赖 Sass 的 map-loop 和 breakpoint-colors 变量映射，但默认只对语义灰度类（如 text-body、text-muted）启用断点前缀支持；text-primary 等主题色类**不参与响应式生成**，无论你写 text-sm-primary 还是 text-md-success，CSS 文件里都没有对应规则。

检查浏览器开发者工具，你会发现 text-sm-primary 完全没被解析，也不触发任何样式
Bootstrap 5.3+ 文档明确列出的响应式文本类只有：text-sm-body、text-md-muted、text-lg-body-secondary 等，全部基于 body / muted / body-secondary 这类语义灰度类
想在小屏用 primary、大屏换 success？只能手动写媒体查询或用内联 style

怎么真正实现“小屏蓝色、大屏绿色”的文本色切换

靠官方响应式类做不到，得用更可控的方式。推荐两种务实做法：

用 CSS 媒体查询覆盖：

@media (max-width: 575.98px) {
  .responsive-text {
    color: var(--bs-primary);
  }
}
@media (min-width: 576px) {
  .responsive-text {
    color: var(--bs-success);
  }
}

用内联 style + JS 动态判断（适合简单页面）：
```
<p :class="{'text-primary': window.innerWidth < 576, 'text-success': window.innerWidth >= 576}">响应式文字</p>
```
（Vue 场景）或直接 <p id="target"></p> + document.getElementById('target').style.color = window.matchMedia('(min-width: 576px)').matches ? 'var(--bs-success)' : 'var(--bs-primary)'
如果用 Sass 构建项目，可扩展一个自定义 mixin：@mixin text-breakpoint($breakpoint, $color) { @include media-breakpoint-up($breakpoint) { color: map-get($theme-colors, $color); } }，然后在组件里调用

为什么 text-body-secondary 能响应屏幕尺寸，text-primary 就不能

因为 text-body-secondary 属于“语义化灰度体系”，它的颜色值不是固定 hex，而是由 color-mix() 或 rgba() 动态计算得出，且 Bootstrap 的 Sass 编译器为这类类名显式启用了断点循环；而 text-primary 直接映射到 $primary 变量，属于“主题色体系”，设计初衷就是跨设备一致——它本就不该随屏幕变色，否则按钮、导航、表单控件的视觉一致性就崩了。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

text-body-secondary 在 sm 下可能是 rgba(33, 37, 41, .4)，在 lg 下变成 rgba(33, 37, 41, .3)，这是为了适配不同密度下的阅读舒适度
text-primary 在所有尺寸下都应保持品牌识别度，所以它不响应断点，也不响应深色模式（除非你用 data-bs-theme="dark" 并重定义 $primary）
误以为 text-sm-primary 是漏掉的语法糖，其实是混淆了“语义灰度”和“主题色”两套逻辑

容易踩的坑：写了 text-md-primary 却没效果，还反复刷新页面

这不是缓存问题，也不是 CDN 加载失败，而是类名根本没被 Bootstrap 编译进 CSS。常见错误操作包括：

复制网上过时教程（比如 Bootstrap 4 早期 beta 版曾试验性支持过部分响应式 color 类，但正式版删掉了）
用构建工具（如 Vite + bootstrap-icons）时，只引入了 JS 而没加载完整 CSS，导致连基础 text-primary 都失效，更别说不存在的响应式变体
在深色模式下测试 text-light，发现小屏看不见——其实是因为 text-light 在 light 主题下是浅灰，在 dark 主题下仍是浅灰，跟屏幕尺寸无关，跟主题有关
试图用 text-sm-primary 替代 text-primary 来“优化移动端可读性”，结果字体反而更难看清——primary 本身对比度足够，加断点前缀只是徒增无效 class

真正需要响应式文本色的场景，往往指向信息层级变化（比如标题在小屏要降级为正文色），而不是品牌色切换。这时候优先考虑 text-sm-body 或 text-md-muted，它们才是 Bootstrap 设计用来干这事的。