Bootstrap Carousel 的文字说明需通过自定义媒体查询或响应式工具类实现字号响应式，因默认样式不支持自动缩放，且需同步调整行高、边距和容器溢出设置以确保可读性与显示完整性。
Carousel 文字说明的字号响应式控制原理
Bootstrap Carousel 的文字说明（.carousel-caption）默认使用固定字号，不会随屏幕缩放自动调整。它本身不带响应式字号类（比如 fs-1 到 fs-6 在 .carousel-caption 内部不起作用），因为其内部 p 或 h5 标签未被 Bootstrap 的字体大小工具类直接作用——这些类只对直接受控元素生效，而 .carousel-caption 是一个相对定位容器，内部文字需单独处理。
用 CSS 媒体查询覆盖默认字号（推荐）
最稳妥的方式是写自定义 CSS，针对 .carousel-caption 里的标题和段落分别设置断点字号。Bootstrap 5 的断点变量可参考：sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）。
.carousel-caption h5 {
font-size: 1.25rem;
}
.carousel-caption p {
font-size: 1rem;
}
@media (min-width: 768px) {
.carousel-caption h5 {
font-size: 1.5rem;
}
.carousel-caption p {
font-size: 1.125rem;
}
}
@media (min-width: 992px) {
.carousel-caption h5 {
font-size: 1.75rem;
}
.carousel-caption p {
font-size: 1.25rem;
}
}
- 务必把这段 CSS 放在 Bootstrap CSS 之后（否则会被覆盖）
- 不要用
!important——优先级靠加载顺序和选择器 specificity 解决 - 如果用了 Sass，可直接引用 Bootstrap 的
$font-size-base、$breakpoint-md等变量提升一致性
用 Bootstrap 工具类组合 + 自定义 class（轻量替代）
如果你不想写媒体查询，可以给 .carousel-caption 内部元素手动加响应式字号类，但得配合自定义 class 覆盖默认行高/间距，否则文字会挤出容器。
<div class="carousel-caption"> <h5 class="fs-5 fs-md-6 fs-lg-7">标题</h5> <p class="fs-4 fs-md-5 fs-lg-6 mb-0">说明文字</p> </div>
-
fs-5到fs-lg-7这类工具类在 Bootstrap 5.2+ 才支持多断点写法；旧版本只支持单级如fs-4，需自行扩展 - 必须加
mb-0或类似重置 margin，因为.carousel-caption p默认有margin-bottom: 20px，在小屏下容易撑开高度 - 注意：工具类无法控制 line-height 响应式变化，小屏下可能需要额外设
lh-1防重叠
常见踩坑：文字在移动端被裁切或消失
这不是字号问题，而是 .carousel-caption 的 padding 和父容器 .carousel-inner 的 overflow: hidden 共同导致的——尤其当字号放大后，文字超出容器又被裁掉。
- 检查是否误删了
.carousel-caption默认的bottom: 20%，它依赖这个偏移留白；改成bottom: 1rem更可控 - 小屏下建议加
text-wrap: balance（实验性，仅 Chrome 125+）或用word-break: break-word防长单词溢出 - 如果用了
transform: translateZ(0)强制硬件加速（某些轮播插件会加），可能触发 iOS Safari 的渲染 bug，导致文字模糊或消失——临时去掉试试
字号响应式本质是「内容密度」与「可读性」的平衡，别只调 font-size，顺手检查 line-height、padding 和 max-width 才算调到位。
