必须用媒体查询显式设置.carousel-caption内文字字号，因fs-*类不继承且被高优先级规则覆盖；小屏需额外启用display:block并同步调整line-height与padding。
直接写媒体查询，别指望 fs-* 类自动生效——.carousel-caption 里的文字不会继承响应式字号类，必须单独控制。
为什么 fs-4 在 .carousel-caption 里不生效
fs-4 这类工具类只对直接受控元素起作用，而 .carousel-caption 是个定位容器，内部的 h2、p 等标签没被这些类选中。Bootstrap 5 默认也没给它们绑定响应式字体逻辑。
- 检查开发者工具的
Computed面板，会发现font-size来自浏览器默认或全局继承，不是fs-* -
.carousel-caption h2和.carousel-caption p必须显式声明字号，不能靠父容器类传导 - 即使加了
class="fs-5"到h2上，也会被 Bootstrap 的.carousel-caption h2规则覆盖（后者 specificity 更高）
用 @media 按断点阶梯设置字号（推荐）
Bootstrap 5 的断点是 sm（≥576px）、md（≥768px）、lg（≥992px），媒体查询要按这个节奏写，顺序必须从小到大。
- 小屏（≤575.98px）：
@media (max-width: 575.98px) { .carousel-caption h2 { font-size: 1.25rem; } } - 中屏（≥576px）：
@media (min-width: 576px) { .carousel-caption h2 { font-size: 1.5rem; } } - 大屏（≥992px）：
@media (min-width: 992px) { .carousel-caption h2 { font-size: 2rem; } } - 务必把这段 CSS 放在
bootstrap.css之后加载，否则会被覆盖 - 用
rem单位，避免系统字号放大后撑破容器；不用vw或clamp()，容易在轮播图固定高度下导致文字溢出或过小
小屏下文字显示不出来？先确认是否被默认隐藏
Bootstrap 5 中 .carousel-caption 默认只在 md 及以上断点显示，sm 及以下就是 display: none。这不是 bug，是设计行为。
- 打开 DevTools，选中
.carousel-caption，看Computed → display是否为none - 如果要全断点显示，加
@media (max-width: 575.98px) { .carousel-caption { display: block; } } - 别用
d-md-block，它对sm及以下无效；也别用!important硬盖，优先级靠选择器 specificity 解决更稳妥 - 显示出来后，再补上小屏专用的
font-size、line-height和padding，否则文字可能顶边、挤行、贴边
真正容易被忽略的是：字号改了，但 line-height 和 padding 没同步调，结果小屏下文字糊成一团或被裁切。每个断点下的字号调整，都得配一套对应的行高和内边距。
