小屏下 .carousel-caption 默认不显示，需三步解决：一是用媒体查询在 max-width: 575.98px 下设 display: block；二是确保 .carousel-item 有 min-height 并设 position: relative，再用绝对定位稳住文字位置；三是添加遮罩、重置字号与内边距，确保可读性。
小屏下 .carousel-caption 不见了，不是你漏写了 HTML，是 Bootstrap 5 默认就把它 display: none 了——得手动“唤醒”它，再稳住位置、调好字号、加遮罩，三步缺一不可。
为什么小屏下 .carousel-caption 完全不显示
Bootstrap 5 的 .carousel-caption 默认只在 min-width: 768px（即 md 断点）及以上生效，sm（576px）及以下直接被设为 display: none。这不是 bug，是设计行为。
- 打开 DevTools，选中
.carousel-caption元素，看 computed styles 里display是否为none - 别用
d-md-block类强行显示——它对sm及以下完全无效 - 最简调试方案：
.carousel-caption { display: block !important; }，但上线前应替换为媒体查询 - 推荐写法：
@media (max-width: 575.98px) { .carousel-caption { display: block; } }——精准匹配 Bootstrap 的sm断点临界值
文字在小屏上偏顶、被裁切或“飘”出图片区域
即使 display 正确，文字仍错位，根源常是定位锚点失效：小屏图片高度塌缩（比如 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%)——小屏图片高度波动大时极易失效 - 若需垂直居中，推荐组合：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;，并确认.carousel-item已设position: relative
小屏下文字对齐、字号和可读性不协调
.carousel-caption 在 sm 以下没有内置样式，内部 h2、p 直接继承全局字体，窄屏下易顶边、挤行、溢出，且默认无背景遮罩。
- 必须用
@media (max-width: 575.98px)包裹所有调整，避免污染中大屏 - 加基础遮罩：
.carousel-caption { background-color: rgba(0, 0, 0, 0.6); } - 重置内边距与对齐：
.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; margin: 0; } - 字体单位优先用
rem；如需强制固定大小再用px
真正麻烦的不是让文字“出现”，而是让它在各种小屏尺寸、系统字号设置、图片裁剪方式下都稳定可见——关键在于断点边界要准、定位锚点要牢、遮罩和字号要独立控制，缺一环就容易在某台手机上突然消失或堆成一团。
