小屏下.carousel-caption文字错位或消失的根源是bootstrap 5默认仅在md及以上断点显示，且定位依赖父容器高度与字体继承链；需通过媒体查询、稳定定位及断点样式三者协同解决。
小屏下.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%)单独居中——它依赖父容器高度稳定，小屏图片高度波动大时极易失效 - 推荐组合：
position: absolute; bottom: 1rem; left: 0; width: 100%; text-align: center;
对齐和字体在小屏下不协调？别靠全局重置，要断点内独立控制
.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开发者工具里字体大小不生效？大概率是优先级或断点写错了
常见现象是写了 font-size: 1.1rem 却没变化，原因通常是 Bootstrap 原生样式带 !important，或媒体查询断点逻辑反了。
- 打开 DevTools → Elements → 选中文字 → 看 Computed 标签页里
font-size最终来源；若来自bootstrap.min.css且标有!important，就得提升选择器权重（比如加.carousel-item .carousel-caption h2） - 确保你的自定义 CSS 文件在
bootstrap.css之后引入 - 别写
@media (max-width: 768px)——Bootstrap 的sm断点是 576px，768px 已属md，此时修改已晚 - 检查是否误用了
min-width控制小屏：想管小屏，必须用max-width，否则规则根本不会触发
display）、定位上下文（.carousel-item 高度）、以及子元素继承链（h2/p 的 font-size 和 line-height）。漏掉任意一个，文字就会“失踪”或“乱跑”。
