Bootstrap如何让文字在不同断点下显示不同的字体粗细-Bootstrap教程-PHP中文网

bootstrap 5 不支持断点级 font-weight 类，需用媒体查询自定义类（如 .text-weight-md-up-bold）或 sass 批量生成静态类；推荐媒体查询方案，避免 js 动态切换，注意 font-weight 数值兼容性。

bootstrap如何让文字在不同断点下显示不同的字体粗细

Bootstrap 5 怎么用响应式类控制 font-weight？

Bootstrap 5 原生不提供像 .fw-sm-bold 或 .fw-lg-normal 这样的断点级字体粗细类。它只有一套全局的 .fw-light、.fw-normal、.fw-bold 等类，应用后对所有屏幕尺寸生效。

想实现「小屏用 normal，大屏用 bold」，必须自己扩展或用 CSS 媒体查询覆盖。

用自定义 CSS 媒体查询覆盖 font-weight

这是最直接、可控性最强的方式，避免依赖 JS 或复杂工具链。

VPS Bootstrap

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

下载

在你的项目 CSS（或 <style></style> 块）中写媒体查询，例如：

@media (min-width: 992px) {
  .text-weight-md-up-bold {
    font-weight: 700 !important;
  }
}
@media (max-width: 991.98px) {
  .text-weight-md-up-bold {
    font-weight: 400 !important;
  }
}

注意 Bootstrap 断点值：sm 是 576px，md 是 768px，lg 是 992px，xl 是 1200px —— 写媒体查询时用实际像素值，别抄错
加 !important 是因为 Bootstrap 的 .fw-bold 本身带 !important，不加容易被覆盖失效
类名自己命名，比如 .text-fw-sm-normal-lg-bold，语义清晰比缩写更重要

用 Sass 变量 + 自定义响应式工具类（适合已用 Sass 的项目）

如果你的项目已引入 Bootstrap 源码（Sass 版），可以复用它的断点变量和工具类生成逻辑。

在自定义 Sass 文件中引用：

@each $breakpoint, $value in map-get($grid-breakpoints, 'breakpoints') {
  @include media-breakpoint-up($breakpoint) {
    .fw-#{$breakpoint}-bold {
      font-weight: 700;
    }
  }
}

编译后会生成类似 .fw-md-bold、.fw-lg-bold 的类，但它们仍是静态类，不是“条件切换”——你仍需手动在 HTML 中组合使用，例如：<p class="fw-sm-normal fw-lg-bold">文字</p>
这种方式本质是批量生成多个独立类，而非单个类响应变化；真正“一个类控制多断点”的行为，仍需靠 CSS 媒体查询驱动