最简单彻底隐藏 Bootstrap 5 轮播箭头的方法是 .carousel-control-prev, .carousel-control-next { display: none; }，它精准移除箭头容器而不影响指示器、滑动或键盘导航功能。
直接隐藏箭头元素的 CSS 最简单
想彻底去掉左右箭头，不需要删 HTML 或改 JS，用一行 CSS 就够：.carousel-control-prev, .carousel-control-next { display: none; }。这个选择器精准命中 Bootstrap 5 的箭头容器，不会影响指示器、轮播逻辑或图片切换功能。
常见错误是只隐藏图标元素（如 .carousel-control-prev-icon），结果按钮容器还在，仍占布局空间、可能触发点击干扰；或者误用 visibility: hidden，元素不可见但保留占位，移动端点按区域仍存在。
如果项目用了 Sass，也可以在变量层统一关闭：在自定义 SCSS 中覆盖 $enable-carousel-controls: false;，再重新编译 Bootstrap —— 但仅适用于源码构建场景，CDN 用户不适用。
用 data-bs-touch 控制是否启用触摸滑动
隐藏箭头后，用户只剩两种操作方式：点击指示器，或手指滑动（如果启用）。但默认情况下，Bootstrap 5 的触摸滑动是自动检测 TouchEvent 构造函数来决定是否开启的，不是靠箭头开关。
确保滑动可用需满足：
- 引入的是 bootstrap.bundle.min.js（含 Carousel 插件）
- 轮播容器没加 data-bs-touch="false"
- 浏览器环境支持 TouchEvent（iOS Safari、Chrome Android 均支持；某些 WebView 或测试环境需手动补丁）
如果滑动也不想要，可以显式禁用：<div class="carousel slide" data-bs-touch="false">。这样用户就只能点指示器了。
避免隐藏后留下空白边距
箭头被 display: none 后，轮播容器左右可能还留有空隙——这不是箭头本身导致的，而是 Bootstrap 默认给 .carousel-inner 设了 margin-left: -1rem 和 margin-right: -1rem，用来抵消箭头容器的绝对定位偏移。一旦箭头消失，这个负边距就多余了，会让图片内容向两侧“溢出”视觉边界。
修复方法很简单：
- 加一条 CSS：.carousel:not(.carousel-fade) .carousel-inner { margin-left: 0; margin-right: 0; }
- 或者更稳妥地，直接重置整个轮播内边距：.carousel .carousel-inner { padding-left: 0; padding-right: 0; }
注意别漏掉 :not(.carousel-fade) 这个条件，否则会破坏淡入淡出模式下的居中逻辑。
如果还要保留键盘导航就得留心
隐藏箭头后，ArrowLeft / ArrowRight 键依然能控制轮播切换——这是 Bootstrap Carousel 的内置行为，和箭头 DOM 是否可见无关。这点常被忽略，但对可访问性很重要。
若你确实想连键盘导航也一并禁用，不能靠 CSS，得在初始化时关闭：const myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'), { keyboard: false });
不过建议保留键盘支持：屏幕阅读器用户、习惯键盘操作的开发者、甚至只是临时拔掉鼠标的人，都依赖它。真正要做的，是确保隐藏箭头后，焦点不会“卡”在已不可见的按钮上——Bootstrap 5 默认会跳过 display: none 元素，所以只要没手动 tabindex="0"，通常没问题。
