小屏下.carousel-caption默认不显示是因为bootstrap 5仅在≥768px断点显示，sm及以下设为display: none；需用@media (max-width: 575.98px)启用并配合min-height、遮罩、定位及字体响应式调整确保可读性。
小屏下.carousel-caption根本没显示？先看display是否为none
Bootstrap 5 默认把 .carousel-caption 设为仅在 min-width: 768px（即 md 断点）及以上显示，sm（576px）及以下直接是 display: none。你调了半天样式却看不到文字，大概率不是写错了 CSS，而是元素压根没渲染出来。
- 打开浏览器开发者工具，选中
.carousel-caption元素，检查 computed styles 中的display值 - 别用
d-md-block类——它只在 ≥768px 生效，对小屏完全无效 - 临时调试可用：
.carousel-caption { display: block !important; }，但上线前应换成更可控的媒体查询 - 推荐写法：
@media (max-width: 575.98px) { .carousel-caption { display: block; } }
文字在小屏上“飘”出图片或被裁切？定位锚点失效了
即使 display 正确，top: 20% 这类百分比定位在小屏下极易失准——图片高度因 object-fit: cover 裁剪后变窄，top: 20% 就会把文字推到可视区外。
- 确保父容器
.carousel-item有明确高度，例如加min-height: 40vh；否则绝对定位的.carousel-caption会相对于 viewport 定位，而非图片本身 - 改用更稳定的定位组合：
position: absolute; bottom: 1rem; left: 0; width: 100%; text-align: center; - 避免单独依赖
top: 50%; transform: translateY(-50%)——它要求父容器高度稳定，而小屏图片高度波动大 - 现代写法可尝试
inset: auto 1rem 1rem 1rem，但需确认目标浏览器支持
小屏字体挤在一起、顶边、溢出？别靠全局重置
.carousel-caption 在 sm 断点以下没有内置样式，内部 h2、p 直接继承全局字体和间距，窄屏下极易撑破容器或行高塌陷。
- 所有调整必须包裹在
@media (max-width: 575.98px)内，避免污染中大屏 - 给
.carousel-caption加text-align: center和padding: 1rem 0.5rem防止左右贴边 - 单独重置子元素：
.carousel-caption h2 { font-size: 1.25rem; line-height: 1.3; margin: 0; }、.carousel-caption p { font-size: 0.95rem; line-height: 1.4; } - 字体单位优先用
rem，避免系统字号放大后撑破容器；如需强制固定大小，再用px
Chrome开发者工具里字体大小不生效？优先级和断点写错最常见
常见原因不是代码没写，而是 CSS 权重不够，或媒体查询断点设错。
- 打开 DevTools，选中字幕文字，在 Computed 面板看
font-size最终来源——如果来自bootstrap.min.css且带!important，就得提升你自己的选择器权重 - 确保自定义 CSS 文件在
bootstrap.css之后引入；调试时可临时加!important，但上线前应优化选择器（比如用.carousel-item .carousel-caption h2） - 别写
@media (max-width: 768px)——Bootstrap 的sm断点是 576px，768px 已属md，此时修改已晚 - 必须手动加遮罩：
.carousel-caption { background-color: rgba(0, 0, 0, 0.6); padding: 1rem; }，Bootstrap 5 默认已移除背景和内边距
.carousel-item 缺少 min-height 导致定位上下文丢失，以及媒体查询断点值写成 768px 而不是 575.98px。这两点一错，其他所有样式都白调。
