<p>Bootstrap 5 不支持 fw-sm-bold 等断点专属字体粗细类，必须用 d-* 显隐类包裹多段文字实现响应式 font-weight 切换，或通过自定义 SCSS 扩展断点级 fw- 类。</p>
Bootstrap 5 如何用响应式工具类控制 font-weight
Bootstrap 5 原生不提供 fw-sm-bold、fw-md-light 这类断点专属字体粗细类，直接写 fw-bold 会全局生效，无法按屏幕尺寸切换。必须组合使用断点前缀 + 独立的 font-weight 工具类，并依赖 CSS 层叠顺序覆盖。
为什么直接加多个 fw-* 类无效
所有 fw- 类（如 fw-light、fw-bold）都作用于同一 CSS 属性 font-weight，且权重相同。浏览器按 HTML 中类出现的**顺序**应用，后写的覆盖前写的——但断点类（如 d-md-inline）本身不改变 font-weight，所以光靠堆砌类没用。
-
<p class="fw-light fw-bold">→ 最终是fw-bold（后声明） -
<p class="fw-md-light fw-lg-bold">→ 无效，Bootstrap 没定义fw-md-light
正确做法：用断点前缀 + display 或 visibility 配合多层元素
最稳妥的方式是包裹两段文字，分别用断点控制显隐，避免 CSS 冲突：
<p> <span class="fw-light d-md-none">手机端轻细</span> <span class="fw-bold d-none d-md-inline">中屏及以上加粗</span> </p>
关键点：
-
d-md-none在 ≥md 时隐藏，d-none d-md-inline在 <md 时隐藏、≥md 时显示 - 两段文字语义一致，仅视觉不同，对 SEO 和屏幕阅读器友好
- 不依赖自定义 CSS，纯 Bootstrap 5.3+ 工具类可实现
进阶：用自定义 CSS 补全断点级 font-weight 类
如果项目中高频使用（比如需要 fw-sm-normal fw-lg-bold），可以扩展 SCSS：
@each $breakpoint, $value in map-get($grid-breakpoints, sm) {
.fw-#{$breakpoint}-light { @include font-weight(300); }
.fw-#{$breakpoint}-normal { @include font-weight(400); }
.fw-#{$breakpoint}-bold { @include font-weight(700); }
}编译后就能用 fw-sm-light、fw-lg-bold 等类。注意：需确保这些类的 CSS 选择器权重不低于原生 fw- 类（默认是单类，无需额外 !important）。
真正容易被忽略的是：Bootstrap 的断点类（sm/md）对应的是 min-width，不是“仅在此宽度下生效”。d-md-none 表示“在 md 及以上断点都不显示”，不是“只在 md 显示”。这点错配会导致文字在错误尺寸消失或残留。
