左右箭头不显示需检查data-target与轮播容器id是否严格匹配、按钮是否含carousel-control-prev/next类、CSS是否引入及未被重置；点击无效则查JS加载、type="button"及初始化时机；移动端需扩热区、换标签并确保z-index层级。
左右箭头不显示？先查 data-target 和 class 是否匹配
Bootstrap 4 的轮播箭头是纯 CSS 驱动的，但依赖两个硬性条件：按钮的 data-target 值必须严格等于轮播容器的 id（注意带 #），且按钮本身必须有 carousel-control-prev 或 carousel-control-next 类。漏掉任一，箭头就“隐形”——不是没渲染，而是没样式。
常见错误：
-
data-target="#myCarousel"，但轮播容器写的是id="carouselExample"→ 箭头失效 - 用了
carousel-control却漏了-prev或-next后缀 → 按钮存在但无图标、无定位 - 没引入 Bootstrap 4 的 CSS（尤其图标用的 Unicode 字符 ‹ / ›），或被全局重置样式清掉了
color或background→ 箭头区域空白
改颜色、换图标？覆盖伪元素，别动 HTML 结构
Bootstrap 4 默认用 Unicode 字符（‹ 和 ›）通过 ::before 渲染箭头，不推荐删标签重写 HTML。最稳妥的方式是 CSS 覆盖：
- 改颜色：
.carousel-control-prev-icon, .carousel-control-next-icon { color: #ff6b35; }（注意：部分版本需加!important） - 换图标（如 Font Awesome）：
.carousel-control-prev-icon, .carousel-control-next-icon { background-image: none; }，再用::before插入：content: "\f053"; font-family: "Font Awesome 5 Free"; font-weight: 900; - 调大小：
.carousel-control-prev-icon, .carousel-control-next-icon { width: 2rem; height: 2rem; }，并确保font-size或line-height能撑开内容
点击没反应？检查 JS 加载链和 type="button"
箭头点击本质是触发 slide.bs.carousel 事件，靠 Bootstrap 的 carousel.js 监听。如果点击无响应，问题不在 HTML，而在运行时环境：
立即学习“前端免费学习笔记（深入）”；
- 只引入了
bootstrap.min.js，没引入bootstrap.bundle.min.js（含 Popper + Carousel 插件）→ 缺少 carousel 模块，事件不注册 - 轮播容器加了
data-ride="carousel"，但 JS 在 DOM 加载前执行 → 初始化失败，后续事件监听也挂了 - 用了
<button>标签但没设type="button"→ 表单提交干扰点击，必须显式声明 - 自定义 JS 里调用了
$carousel.carousel('pause')却没恢复 → 整个轮播被锁死，包括箭头
移动端点不准或延迟？扩热区 + 换标签
默认箭头热区太小（仅图标尺寸），iOS Safari 还有 300ms 延迟。生产环境必须处理：
- 扩大点击区域：
.carousel-control-prev, .carousel-control-next { width: 48px; height: 48px; padding: 12px; display: flex; align-items: center; justify-content: center; } - 避免原生
<button>→ 改用<a role="button">，并加pointer-events: all显式启用触控 - 确保轮播容器有
position: relative，否则绝对定位的箭头会脱标；同时确认没被overflow: hidden裁掉 - 移动端无
:hover，反馈要用:active或 JS 添加临时 class，不能只靠 hover 放大
真正容易被忽略的是：箭头的 z-index 必须高于 .carousel-inner 及其子项，否则在某些嵌套结构下会被遮挡；而这个层级关系，仅靠 DevTools 查看 computed z-index 不够，得看是否意外创建了新的层叠上下文。
