小屏下.carousel-caption文字不显示是因bootstrap 5默认仅在≥768px显示，sm及以下display: none；需用@media (max-width: 575.98px)启用并重置定位、对齐、字体等样式。
小屏下 .carousel-caption 文字不显示、错位或挤出图片，不是因为你没写对 CSS，而是 Bootstrap 5 默认在 sm（576px）以下完全隐藏它，且定位逻辑依赖不稳定的高度参照。
为什么小屏下 .carousel-caption 根本不出现？
Bootstrap 5 的 .carousel-caption 默认只在 min-width: 768px（即 md 断点）及以上生效，sm 及以下直接是 display: none。这不是 bug，是设计选择。
- 打开 DevTools，选中
.carousel-caption元素，看 Computed 面板里的display是否为none -
d-md-block类只在≥768px生效，对小屏无效，别指望它能“救场” - 最简调试方案：
.carousel-caption { display: block !important; }—— 仅限验证逻辑，上线前必须替换 - 推荐做法：用媒体查询精准控制，例如
@media (max-width: 575.98px) { .carousel-caption { display: block; } }（注意是575.98px，非575px，避免 1px 错位）
文字在小屏上“飘”出图片或被裁切怎么办？
即使 display 正确，top: 20% 这类百分比定位在小屏下极易失效——图片因 object-fit: cover 裁剪后高度塌缩，20% 就变成几像素，文字直接顶到顶部外。
- 确保父容器
.carousel-item有稳定高度，比如加min-height: 40vh；否则绝对定位会相对于 viewport，而非图片本身 - 改用更可靠的锚点：
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; margin: 0; } - 优先用
rem单位；若需强制固定大小再用px；慎用clamp()——Carousel 文字需要阶梯式响应，不是连续缩放
真正容易被忽略的点是：你写的样式可能被 Bootstrap 自带的 !important 或父容器的 text-align 覆盖，务必用 DevTools 看 computed styles 的最终来源，而不是只盯自己写的那几行 CSS。
