Bootstrap框架中不同屏幕尺寸下的文本大小控制-Bootstrap教程-PHP中文网

bootstrap 5 中 text-{breakpoint}-{size} 类需按断点升序声明（如 text-sm text-lg），因后定义类覆盖前类；必须添加 viewport meta 标签，且避免祖先元素设置 font-size 干扰 rem 计算。

bootstrap框架中不同屏幕尺寸下的文本大小控制

text-sm / text-lg 这类类名在 Bootstrap 5 中怎么用才不踩坑

Bootstrap 5 的响应式文本大小不是靠媒体查询手动写，而是通过预设的 text-{breakpoint}-{size} 类组合控制。关键点在于：断点前缀必须紧跟在 text- 后面，且只对指定断点及更大屏幕生效——text-sm 实际作用于 sm 及以上（≥576px），不是“仅在小屏生效”。

常见错误是以为 text-md 能覆盖中屏、text-lg 覆盖大屏，结果发现小屏文字反而变小了。这是因为类名叠加时，后声明的类会覆盖前面的（CSS 层叠顺序），而 Bootstrap 的断点类按 xs→sm→md→lg→xl→xxl 顺序定义，所以 text-sm text-lg 最终只保留 lg 效果（因为 text-lg 定义在后面）。

text-sm：适用于 ≥576px；想让小屏用小字、大屏放大？得写 text-xs text-sm text-md text-lg 逐级覆盖（但不推荐，冗余且难维护）
真正可控的做法是只写一个“基础大小” + “向上增强”，比如 text-base text-lg-lg（Bootstrap 5 没有 text-base，默认是 font-size: 1rem，所以直接写 text-lg 表示从 lg 起放大）
别混用 fs-*（固定尺寸类）和 text-*-*（响应式尺寸类），它们来源不同：fs-4 是固定值，text-lg-h6 是响应式标题语义类，行为不一致

为什么加了 text-xl 却没变大？检查是否漏了 viewport meta

响应式类依赖视口宽度判断断点，如果页面没加 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会以桌面宽度渲染（如 980px），导致 xl（≥1400px）永远不触发，text-xl 看起来完全无效。

另一个常见原因是父容器设置了 font-size，而 Bootstrap 的 text-* 类用的是 em 或 rem 单位——比如父元素 font-size: 0.875rem，那么 text-xl（默认 1.25rem）实际计算为 1.25 × 0.875rem ≈ 1.09rem，可能比预期小。

VPS Bootstrap

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

下载

用浏览器开发者工具检查最终计算出的 font-size 值，而不是只看 class 是否存在
避免在祖先元素上随意设置 font-size，尤其不要用 % 或 em 往下传递
如果必须定制基础字号，优先改 :root 的 --bs-body-font-size 变量，而非直接覆盖 html 或 body

自定义响应式字体大小：用 CSS 变量 + @media 替代硬编码

Bootstrap 内置的 text-* 类只有 6 级（xs–xxl），且尺寸是固定步进（0.75rem, 0.875rem, … 1.5rem）。真要适配折叠屏或超宽屏，或者需要非线性变化（比如小屏 16px、中屏 18px、大屏直接跳到 24px），就得自己写媒体查询。

推荐方式是复用 Bootstrap 的断点变量，保持一致性：

@include media-breakpoint-up(md) {
  .my-text-responsive {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }
}
@include media-breakpoint-up(xl) {
  .my-text-responsive {
    font-size: 1.75rem;
  }
}

别直接复制 Bootstrap 的断点像素值（如 @media (min-width: 992px)），用 media-breakpoint-up() 混合宏，方便未来统一调整断点配置
clamp() 在支持的浏览器里很实用，但注意 Safari 旧版（≤13.1）不支持，需加 font-size: 1.5rem 回退
自定义类名别起成 text-custom-xl，容易和原生类混淆；用语义化命名如 heading-hero 更清晰