箭头不显示主因是data-bs-target与轮播id不严格匹配、控制按钮缺失carousel-control-prev/next类、或Bootstrap图标CSS未加载；解决需确保三者一致，再覆盖background-image或变量。
直接换 .carousel-control-prev-icon 和 .carousel-control-next-icon 的 background-image 就行，但必须先确保 Bootstrap 5 的图标规则没被意外覆盖或缺失。
为什么箭头不显示？先查这三处硬性匹配
箭头“消失”大概率不是 CSS 没生效，而是底层条件没满足：
-
data-bs-target的值（如#myCarousel）必须与轮播容器的id（如id="myCarousel"）**严格一致**，大小写、符号、空格都不能差 - 左右按钮必须分别带有
carousel-control-prev和carousel-control-next类——漏掉-prev或-next后缀，CSS 选择器就失效 - Bootstrap 的 CSS 必须完整加载，尤其是内置 SVG 图标规则；如果只引了精简版 CSS 或漏了
bootstrap-icons，background-image会 fallback 成空白
替换 background-image 的两种安全方式
Bootstrap 5 默认用伪元素 + base64 SVG 渲染箭头，不建议改 HTML 结构。推荐以下任一做法：
- 覆盖变量（最轻量）：
:root { --bs-carousel-control-color: #333; }再配合.carousel-control-prev-icon, .carousel-control-next-icon { background-color: transparent; }清除默认背景色 - 重写 background-image（更灵活）：
.carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.207 4 5.75 2.5z'/%3e%3c/svg%3e"); }.carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.793 4 2.25 5.5 3.5 7l4-4-4-4z'/%3e%3c/svg%3e"); }注意 URL 需转义，颜色填在fill='%23xxx'里
移动端点击无反应？别用 button 标签硬套
原生 <button> 在 iOS Safari 上有 300ms 延迟，且容易和 touchmove 冲突。生产环境应换成语义更准、行为更可控的标签：
立即学习“前端免费学习笔记（深入）”；
- 用
<span role="button">替代<button>，并手动加tabindex="0"保证可聚焦 - 必须确保
bootstrap.bundle.min.js已加载（含 Carousel 插件），仅引bootstrap.min.js会导致slide.bs.carousel事件监听失败 - 检查是否在自定义 JS 中调用了
carousel('pause')却未恢复，整个轮播状态会被锁死
真正麻烦的不是换图标，而是当多个轮播图共存时，data-bs-target 和 id 的配对极易手误；一个错位，所有箭头都变“透明”。建议把 id 命名和 target 值写在同一个配置常量里复用，而不是分散写死。
