根本原因是.carousel-indicators与.carousel-caption均使用position: absolute+bottom定位且z-index冲突，叠加窄屏下viewport缩放、图片压缩及自定义样式导致遮挡。
Bootstrap 4 轮播指示器（.carousel-indicators）在窄屏上遮挡底部文字，根本原因是其默认 CSS 使用了 position: absolute + bottom: 0，且未考虑 .carousel-caption 的高度与定位冲突。
indicator 的绝对定位会覆盖 caption 区域
Bootstrap 4 的指示器默认渲染在轮播容器底部边缘：bottom: 0，而 .carousel-caption 默认也是 position: absolute + bottom: 20px（或类似值）。两者都脱离文档流、同层叠上下文（z-index 默认为 auto），最终由 HTML 顺序决定谁在上——指示器写在 caption 后面，就会盖住它。
-
.carousel-indicators的z-index默认是15（Bootstrap 4 源码中定义），而.carousel-caption是10，本应 caption 在下、indicator 在上；但若你自定义过 caption 的z-index或用了!important，就可能翻转层级 - 窄屏下图片高度压缩，caption 文字行高相对变大，
bottom: 20px不再足够留白，文字直接顶到 indicator 底边 - indicator 本身有
padding-bottom: 10px（部分定制版），进一步吃掉 caption 可用空间
移动端 viewport 缩放导致 bottom 计算失准
当页面未正确设置 ，或用户手动缩放时，bottom: 0 实际锚点会偏移。尤其在 iOS Safari 中，地址栏收起/展开会动态改变视口高度，absolute 元素的 bottom 值按“当前视口高度”计算，而非轮播容器自身高度，造成定位漂移。
- 检查是否漏写了 viewport meta 标签——这是 80% 窄屏错位问题的根源
- 避免对
.carousel设置height或min-height，否则在小屏上容易触发 overflow 或裁剪，干扰绝对定位基准 - 不要给
.carousel-indicators加transform: translateY()类，它会创建新层叠上下文，影响 z-index 判断
修复方案：优先用 CSS 覆盖而非 JS 重排
不推荐监听 resize 或 touch 事件去动态改 top/bottom——性能差、易竞态。直接 CSS 调整更稳定：
- 提高 caption 层级：
.carousel-caption { z-index: 20 !important; } - 为 indicator 在窄屏加安全间距：
@media (max-width: 767.98px) { .carousel-indicators { bottom: 40px; } } - 或者让 indicator 避开 caption 区域：把
.carousel-indicators移到.carousel-inner外部、放在.carousel底部，并设margin-top: -20px往上提，不依赖 bottom 定位 - 若使用自定义 caption 高度（如多行文本），建议用
flex替代absolute：给.carousel-item设position: relative; display: flex; flex-direction: column;，再把 caption 放在内部 footer 位置
真正麻烦的不是 indicator 本身，而是它和 caption 共享同一套 absolute + bottom 逻辑却没预留响应式容错空间。改一个值容易，但得想清楚：你到底要 caption 显示在图片上，还是作为独立内容块？后者更适合窄屏阅读体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
