小屏下.carousel-caption文字不显示是因为bootstrap 5默认仅在≥768px显示，sm及以下display: none；需用媒体查询启用显示，并配合定位、高度、字体及遮罩等响应式调整确保正常呈现。
小屏下.carousel-caption文字不显示？先看它是不是被默认隐藏了
Bootstrap 5 的 .carousel-caption 默认只在 min-width: 768px（即 md 断点）及以上显示，sm（576px）及以下直接是 display: none。这不是 bug，是设计行为——你没看到文字，大概率不是 CSS 写错了，而是元素压根没渲染出来。
- 打开浏览器开发者工具，选中
.carousel-caption元素，检查 computed styles 里的display是否为none - 别依赖
d-md-block：它只在min-width: 768px生效，对sm及以下完全无效 - 若必须全断点显示，最简调试方案是加覆盖规则：
.carousel-caption { display: block !important; } - 更稳妥的做法是用媒体查询精准控制：
@media (max-width: 575.98px) { .carousel-caption { display: block; } }
文字在小屏上偏顶、贴边或“飘”出图片？定位锚点失效了
即使 display 正确，文字仍可能错位，根源常是 top: 20% 这类百分比定位在小屏图片高度塌缩后失去参照——比如 object-fit: cover 裁剪后只剩一窄条，top: 20% 就会把文字推到可视区外。
- 改用更稳定的定位方式：
bottom: 1.5rem或现代写法inset: auto 1rem 1rem 1rem - 确保父容器
.carousel-item有明确高度，例如设min-height: 40vh；否则绝对定位的.carousel-caption会相对于 viewport 定位，而非图片本身 - 避免单独用
top: 50%; transform: translateY(-50%)居中——它依赖父容器高度稳定，小屏图片高度波动大时极易失效 - 推荐组合：
.carousel-caption { position: absolute; bottom: 1rem; left: 0; width: 100%; text-align: center; }
小屏下文字左对齐但想居中？别用 text-center 全局覆盖
text-center 等价于 text-xs-center，会作用于所有断点，且无法被更小断点类覆盖。一旦写了它，text-md-start 或 text-lg-center 都不会生效。
- 正确做法是「移动优先」：先设基础行为（小屏左对齐），再用更大断点类逐级覆盖
text-start→ xs 尺寸默认左对齐text-md-center→ ≥768px 时居中text-xl-end→ ≥1400px 时右对齐 - 顺序必须从小到大写，CSS 层叠才可靠；写反了（比如
text-xl-end text-md-center）会导致 xl 下也居中 - 如果要小屏居中、大屏两端对齐，用：
text-center text-lg-justify—— 注意text-lg-justify是唯一能实现两端对齐的响应式类，text-lg-start不等于 justify
字体大小和行高在小屏下挤成一团？必须断点内重置子元素
.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; }<br>.carousel-caption p { font-size: 0.95rem; line-height: 1.4; } - 字体单位优先用
rem，避免系统字号放大后撑破容器；如需强制固定，再用px
复杂点在于：小屏下 .carousel-item 高度不稳定 + .carousel-caption 缺乏默认遮罩 + 子元素无断点样式，这三者叠加，光调 text-align 是没用的。得同时管住显示、定位、容器高度、字体、遮罩，少一个环节都会出问题。
