Bootstrap如何设置不同屏幕断点下的文本字体大小（Responsive Font）

作者：袖梨 2026-08-12

<p>Bootstrap 5.3+ 的 fs-* 类未生效最常见的原因是版本低于5.3（如5.2.3），该类仅在5.3+中定义；其次为自定义 :root 字号破坏 clamp() 响应逻辑、浏览器不支持 clamp()、第三方组件样式隔离、CSS 层叠顺序错误（须按 xs→sm→md→lg→xl→xxl 从小到大书写）及全局 !important 覆盖。</p>

Bootstrap 5.3+ 的 fs-* 类为什么没生效

最常见原因是版本不够——fs-sm-4 这类带断点前缀的类只在 Bootstrap 5.3 及以上才被定义。用 console.log(bootstrap.version) 检查，如果是 "5.2.3" 或更低，写了也白写，浏览器直接忽略整个类名。

另一个高频干扰是自定义根字号：:root { font-size: 18px; } 会让 clamp() 中的 rem 部分同比放大，但 vw 部分不变，结果小屏字反而比预期更大，看起来像“没响应”。别改 :root 字号，除非你同步重调 RFS 参数。

确认 CDN 引入的是 [email protected]+，不是 [email protected] 或更老的 minified CSS
检查控制台是否报 Unknown property 'font-size'——那说明浏览器不支持 clamp()（如 Safari ≤13.1），会 fallback 到最小值，不是 bug 是降级
第三方组件（如 select2、flatpickr）内部文字不受 fs-* 影响，得单独加 font-size: clamp(...)

怎么正确叠加 fs-* 类实现断点切换

fs-3 fs-md-4 fs-lg-2 是合法写法；fs-lg-2 fs-md-4 几乎一定失效。原因不是语法错，而是 CSS 层叠规则：后写的类里媒体查询范围（@media (min-width: 992px)）覆盖了更小断点，导致 md 断点也套用了 lg 的规则。

fs-* 类的断点前缀不是“仅在该断点生效”，而是“从该断点起（含）开始应用”。所以 fs-md-4 实际作用范围是 ≥768px，fs-3（等价于 fs-xs-3）兜底 ≤576px。

必须按断点从小到大书写：xs → sm → md → lg → xl → xxl，跳过中间断点可以，倒序不行
fs-5 等价于 fs-xs-5，作用于所有视口，是默认 fallback
断点名只能是 Bootstrap 内置的：sm、md、lg、xl、xxl；xs 不加前缀

Bootstrap 5.2 或更早版本怎么办

这些版本压根没有 fs-sm-* 类，Sass 编译时就不存在，CSS 文件里搜不到对应规则。你不能靠引入新版 CSS 补丁解决——RFS 是 Sass 编译期能力，不是运行时 JS 插件。

可行方案只有两个：一是手动写媒体查询 + clamp()，二是走 Sass 流程启用 RFS。后者要求你有构建环境，并且提前在 _custom.scss 里声明：$enable-responsive-font-sizes: true;，位置必须在 @import "bootstrap/scss/variables" 之后、@import "bootstrap/scss/bootstrap" 之前。

纯 CSS 项目推荐抄最新断点值写媒体查询：@media (min-width: 768px) { .my-title { font-size: clamp(1.25rem, 4vw, 1.5rem); } }
别用 calc() 替代 clamp()——它无法设上下限，小屏可能缩到看不见
CDN 引入的 bootstrap.min.css 无法启用 RFS，无论你怎么改配置都没用