bootstrap 5 不支持带断点的 font-weight 和 font-size 工具类（如 fw-md-bold、fs-lg-4），需通过自定义 scss 扩展 utilities 或使用 clamp() 实现响应式字体控制。
Bootstrap 5 如何用响应式工具类控制字体粗细
Bootstrap 5 没有内置 font-weight 的断点专属类（比如 fw-md-bold），直接写 fw-lg-bold 会报错或无效。必须组合使用断点前缀的显示类 + 自定义 CSS，或改用 style 内联方式临时覆盖。
常见错误：复制网上旧教程里的 fw-sm-light 类，实际 Bootstrap 5 不支持这种写法 —— 它只提供全局 fw-light、fw-normal、fw-bold 等，不带断点。
- 正确做法是用断点类包裹文字容器，再配合自定义 CSS：
text-sm-bold这类类名需自己定义 - 或者在 HTML 中用
style属性按媒体查询写死：style="font-weight: 400; font-weight: 600; @media (min-width: 768px) { font-weight: 600; }"（不推荐，维护性差） - 更稳妥的是在
<style></style>或 SCSS 中扩展 Bootstrap 的 utilities：
@include media-breakpoint-up(md) {
.fw-md-bold { font-weight: 700 !important; }
}
@include media-breakpoint-up(lg) {
.fw-lg-bold { font-weight: 900 !important; }
}
如何用 rem + 断点类实现响应式字号
Bootstrap 5 的 fs-1 到 fs-6 是固定值（如 fs-4 = 1.25rem），不随断点变化。想让「手机上 1.125rem、平板上 1.5rem、桌面端 1.75rem」，不能只靠 fs-* 类。
典型误用：<p class="fs-4 fs-md-5 fs-lg-6"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> —— 这样写无效，因为 Bootstrap 5 的字号类不支持断点前缀。
- 可用
h1～h6标签自带的响应式行为（它们内部用了clamp()），但语义不符时慎用 - 推荐方案：用
text-sm、text-md等自定义类，配合 CSSclamp()实现流体字号 - 例如：
.fs-responsive { font-size: clamp(1rem, 2.5vw, 1.5rem); }，在小屏取 1rem，大屏逼近 1.5rem，中间线性过渡
为什么直接加多个 fs-* 类不起作用
Bootstrap 5 的 fs-* 类是独立定义的，没有叠加逻辑。写 fs-3 fs-lg-5 时，两个类都会生效，但后声明的 fs-lg-5 并不会“只在 lg+ 生效”，它只是个普通类，CSS 优先级相同，最终以 CSS 文件中靠后的那个为准 —— 所以你看到的永远是最后一个生效的字号，不是响应式切换。
- 查浏览器开发者工具会发现：
fs-3和fs-lg-5都写了font-size，但没带@media查询，所以后者直接覆盖前者 - 真正起响应作用的，是 Bootstrap 自己为
h1～h6写的clamp()，或你自己写的带媒体查询的类 - 不要依赖未文档化的类名（如网上流传的
fs-md-4），Bootstrap 官方未提供，升级后可能失效
最简可行方案：自定义 SCSS + 编译
如果你项目已用 SCSS，这是最干净的做法。在自定义 SCSS 文件里扩展 utilities：
// _custom-utilities.scss
@each $breakpoint, $value in $grid-breakpoints {
@include media-breakpoint-up($breakpoint) {
.fw-#{$breakpoint}-light { font-weight: 300 !important; }
.fw-#{$breakpoint}-normal { font-weight: 400 !important; }
.fw-#{$breakpoint}-bold { font-weight: 700 !important; }
.fs-#{$breakpoint}-sm { font-size: 0.875rem !important; }
.fs-#{$breakpoint}-lg { font-size: 1.5rem !important; }
}
}
然后在 HTML 中使用：<p class="fw-sm-normal fw-md-bold fw-lg-black fs-sm-3 fs-md-4 fs-lg-5"></p>。注意顺序：靠后的断点类要写在后面，确保 CSS 优先级正确。
真正麻烦的不是写法，而是得确认所有断点类都经过编译且没被 PurgeCSS 清掉 —— 尤其用 Vite 或 Next.js 时，这类动态生成的类名容易被误删。
