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

bootstrap 5 不支持 fw-* 类的响应式断点变体，需通过自定义媒体查询或 sass 混合宏实现不同断点下的 font-weight 切换；推荐定义如 text-fw-sm-bold 的自定义类并配合 @media 或 @include media-breakpoint-up(sm) 控制。

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

Bootstrap 5 如何用响应式工具类控制字体粗细

Bootstrap 5 原生不提供 font-weight 的断点级响应类（比如 fw-bold-sm），直接写 fw-bold 会全局生效，无法按屏幕尺寸切换粗细。必须结合自定义 CSS 或利用现有断点类组合实现。

推荐做法：用 text-sm-bold 这类自定义类名 + 媒体查询，避免污染全局或重复写样式
不要试图复用 fw-* 类叠加，Bootstrap 不支持 fw-normal d-sm-inline fw-bold d-md-none 这种逻辑——d-* 控制显示/隐藏，不是切换样式
若只改粗细，可借用 text-* 系列的断点变体（如 text-sm-bold）并配合 @include media-breakpoint-up(sm) 定义

如何为不同断点设置独立 font-size（非 rem 比例缩放）

Bootstrap 的 fs-* 类（如 fs-4）是固定值（fs-4 = 1.25rem），不响应断点。要实现「小屏 16px、中屏 18px、大屏 20px」这类精确控制，得自己写媒体查询或使用 clamp()。

fs-5 在所有断点下都是 1.5rem，不会随 sm/lg 变化
安全做法：定义类如 fs-responsive，内部用 font-size: clamp(1rem, 2.5vw, 1.25rem);，兼顾流动性和上限

若需严格像素控制（如设计稿要求 14px/16px/18px），必须手写媒体查询：

@media (max-width: 575.98px) { .fs-xs { font-size: 14px; } }
@media (min-width: 576px) and (max-width: 991.98px) { .fs-sm { font-size: 16px; } }
@media (min-width: 992px) { .fs-md { font-size: 18px; } }

为什么不能直接组合 `fs-4` 和 `fw-bold` 实现响应式效果

因为 Bootstrap 的响应式类（如 d-none d-md-block）只控制元素显隐，而 fs-*、fw-* 是静态样式类，没有内置断点变体。你写 fs-4 fw-bold，它在所有尺寸下都生效。

错误示例：文字 → 这只是让文字在 sm 下隐藏，在 md+ 下显示，且始终是 fs-4 + fw-bold
正确思路：要么用多个  分别加不同类并配合 d-*-none/d-*-block 切换（冗余 DOM），要么用自定义类封装媒体查询
性能提示：过多的 d-*-none 切换会导致重排，尤其在移动端频繁触发 resize 时；优先用 CSS 媒体查询而非 display 切换

一个轻量级自定义方案（推荐直接复制使用）

在你的 CSS 文件末尾加这段，就能用 text-fw-sm-bold、text-fs-lg-20 这类语义化类名：

VPS Bootstrap

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

下载

.text-fw-sm-bold { font-weight: normal; }
@media (min-width: 576px) { .text-fw-sm-bold { font-weight: bold; } }
<p>.text-fs-lg-20 { font-size: 16px; }
@media (min-width: 992px) { .text-fs-lg-20 { font-size: 20px; } }</p><p>.text-fs-clamp { font-size: clamp(1rem, 2.5vw, 1.25rem); }</p>

然后 HTML 中：标题文字

注意：clamp() 在 IE 中不支持，如果必须兼容 IE，只能退回纯媒体查询写法。