Bootstrap怎么设置不同屏幕下的文本颜色和字体样式具体类-Bootstrap教程-PHP中文网

bootstrap 5响应式文本颜色类格式为text-{breakpoint}-{color}，须按sm/md/lg/xl/xxl从小到大顺序书写，如text-muted text-sm-primary text-md-success，否则小屏下可能被大断点类错误覆盖。

bootstrap怎么设置不同屏幕下的文本颜色和字体样式具体类

Bootstrap 5 的响应式文本颜色类怎么写

Bootstrap 5 原生支持带断点后缀的文本颜色类，比如 text-sm-primary、text-md-success，但必须按断点顺序书写，否则会被覆盖。

常见错误是写成 text-lg-primary text-sm-muted——这样小屏下反而显示 primary，因为 text-lg-primary 的 CSS 规则优先级更高（它匹配所有 ≥992px 的屏幕，也隐式匹配小屏）。

正确写法：从最小断点开始，从小到大排列，例如 text-muted text-sm-primary text-md-success text-lg-warning
断点含义：text-（xs）、text-sm-（≥576px）、text-md-（≥768px）、text-lg-（≥992px）、text-xl-（≥1200px）、text-xxl-（≥1400px）
注意：text-primary 本身无断点，等价于 text-xs-primary，会作用于所有尺寸，除非被更大断点类覆盖
不支持 text-sm-muted text-md-primary 这种“中间断点生效、两端失效”的逻辑——它只做“≥该断点起生效”，不是“仅在该断点区间生效”

为什么 fw-* 类加了但字体粗细没变

根本原因不是 Bootstrap 类没生效，而是字体文件本身不包含对应字重。浏览器只能模拟加粗（fake bold），导致文字发虚、宽度异常、边缘毛糙。

验证方式：打开 DevTools → Elements → Computed → 查看 font-weight 是否真变成 700，再点开 font-family 看实际加载的字体文件名（如 inter-var-latin.woff2），确认其 metadata 是否声明支持 weight 700。

Google Fonts 必须显式声明多个字重，例如：&family=Inter:wght@400;500;700&display=swap
本地 @font-face 需为每个字重单独定义，不能共用 src；例如 font-weight: 500 和 font-weight: 700 要对应不同文件
fw-medium、fw-semibold 等类名只是 CSS 映射，不打包字体资源；CDN 引入的 bootstrap.min.css 默认不含 fw-500，需 Sass 编译扩展

想用 fw-500 或响应式 font-weight 怎么办

Bootstrap 默认只提供 fw-light（300）、fw-normal（400）、fw-semibold（600）、fw-bold（700）四档，且不支持断点后缀组合（如 fw-sm-bold 是无效类名）。

VPS Bootstrap

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

下载

真要精细控制，必须手写媒体查询——这是唯一可靠方案，尤其当你需要在 800–1024px 区间用 font-weight: 500，或想配合 prefers-reduced-motion 降级时。

推荐写法：

.responsive-weight { font-weight: 400; }<br>@media (min-width: 768px) { .responsive-weight { font-weight: 500; } }<br>@media (min-width: 992px) { .responsive-weight { font-weight: 600; } }

数字值建议只用整百数（300/400/500/600/700），避免无效 fallback（如 450 多数浏览器就近取整为 400 或 500）
加 transition: font-weight 0.2s 可实现渐变效果，但旧版 Safari 不支持，慎用于关键路径