应谨慎使用 display: none 隐藏轮播按钮，因其残留 DOM 会引发可访问性问题；推荐用 opacity: 0 + pointer-events: none 组合，并确保定位上下文正确、保留无障碍支持。
直接隐藏按钮：用 display: none 要谨慎
想让左右箭头彻底不出现，最直觉的做法是给 .carousel-control-prev 和 .carousel-control-next 加 display: none。但这么做会带来两个实际问题：
- 按钮 DOM 仍在，但点击区域消失 → 轮播仍可被键盘
Tab焦点访问，可能造成可访问性问题 - 如果轮播容器设置了
data-bs-ride="carousel"，隐藏按钮本身不影响自动播放，但用户失去手动控制入口
真正“安全隐藏”应配合 aria-hidden="true" 和 tabindex="-1"（若用 <a> 标签），或改用 visibility: hidden 保留占位（避免布局跳动）。
只隐藏图标但保留点击热区？别这么干
有人试图只隐藏 SVG 图标，比如对 .carousel-control-prev-icon 设 opacity: 0 或 background-image: none，结果发现按钮点击失效或 hover 无反馈——这是因为 Bootstrap 的箭头交互依赖整个按钮容器的 pointer-events 和伪元素渲染逻辑。
正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 如果要保留热区但无视觉图标，用
background-color: transparent+border: none+ 显式设置pointer-events: all - 同时确保父容器没设
overflow: hidden，否则扩大的热区会被裁掉 - 移动端必须加
touch-action: manipulation，否则 Safari 可能忽略点击
用 CSS 变量全局禁用：更干净的方案
Bootstrap 5 提供了 --bs-carousel-control-display 变量（部分版本需自行定义），但官方未暴露该变量。更稳妥的方式是覆盖默认显示逻辑：
:root {
--bs-carousel-control-color: transparent;
}
.carousel-control-prev,
.carousel-control-next {
opacity: 0;
pointer-events: none;
}
注意：opacity: 0 比 display: none 更易维护，且不会破坏 flex 布局流；pointer-events: none 彻底关闭交互，比单纯透明更可靠。
隐藏后还要留空位？检查 position 和 overflow
即使按钮被隐藏，它的绝对定位仍可能影响布局——尤其当轮播容器缺少 position: relative 时，隐藏的按钮会跑到 body 顶部，导致空白或滚动异常。
务必确认：
- 轮播外层容器有
position: relative - 没有父级设置
overflow: hidden把按钮“切掉”（哪怕它已不可见） - 用开发者工具检查
computed中的offsetParent，确保按钮定位上下文正确
隐藏按钮不是加一行 CSS 就完事，关键在它是否还参与文档流、是否干扰触摸事件、是否破坏可访问性路径——这三个点漏掉任何一个，都可能在特定设备或辅助工具下暴露问题。
