扩大左右箭头点击区域需设置 .carousel-control-prev/.next 的 width、height、padding 至少 48px，加 display: flex，并检查 overflow: hidden 和 position: relative；纯 CSS 无法扩展至侧边 10% 区域，须用 JS 拦截 touch/mouse 事件判断位置并调用 carousel 方法。
左右箭头点击区域太小，怎么扩大？
bootstrap 默认的 .carousel-control-prev 和 .carousel-control-next 点击热区仅由图标本身（约 1.5rem × 1.5rem）决定，实际可点范围远小于视觉尺寸——这不是 bug，是默认 css 把 .carousel-control-prev-icon 和 .carousel-control-next-icon 设为 inline-block + 小尺寸，容器本身没撑开。
- 直接改
.carousel-control-prev和.carousel-control-next的width、height、padding，就能扩大触发区域（推荐设为至少48px × 48px，符合移动端最小触控标准） - 必须同时加
display: flex或display: inline-flex，否则padding对内部伪元素图标无效 - 别只调
font-size或background-size：它们只放大图标，不扩大热区 - 如果用了
<button></button>标签，还要确保type="button"，否则表单提交会干扰点击
为什么加了 padding 还是点不中？
常见原因是父容器或轮播容器设置了 overflow: hidden，把扩大的按钮裁掉了；或者轮播容器缺少 position: relative，导致绝对定位的箭头脱离预期位置，视觉上“在”但 DOM 坐标偏移。
- 用浏览器开发者工具检查箭头元素的
offsetParent，确认它是否相对于轮播容器定位 - 检查 computed
overflow值——哪怕只是overflow: auto在某些缩放下也会意外裁剪 - 移动端 Safari 对
pointer-events: auto有细微兼容差异，可显式加pointer-events: all到箭头容器上
想让整个侧边 10% 区域都可滑动切换，能实现吗？
不能靠纯 CSS 扩展触发区域到那么宽，Bootstrap 的箭头交互逻辑只绑定在两个按钮上。但可以用 JS 拦截轮播容器的 touchstart / mousedown 事件，根据 clientX 相对容器宽度判断是否落在左右 10% 内，再手动调用 carousel('prev') 或 carousel('next')。
- 注意避免和原生 touch 滑动冲突：先
e.preventDefault()，再判断位移方向与起始区域 - 必须加防抖，否则快速横扫会连续触发多次
next - PC 端需监听
mousedown+mousemove范围判定，不能只靠 click - 这种方案绕过了 Bootstrap 的箭头逻辑，所以
data-bs-target和 class 是否正确已不相关
移动端点击延迟或误触，和触发区域有关吗？
有关。原生 <button></button> 在 iOS Safari 上存在 300ms 延迟，且点击区域过小会导致手指轻微偏移就失焦。更严重的是，如果触发区域和图片内容重叠，touchstart 可能被子元素（如 img）捕获，导致事件不冒泡到箭头容器。
- 优先用
<span role="button"> 替代 <code><button></button>，消除延迟并避免表单行为 - 给箭头容器加
touch-action: manipulation，告诉浏览器这是手势操作区 - 确保轮播图内所有
img都设了pointer-events: none，防止遮挡点击穿透 - 不要依赖
z-index“盖住”其他元素来扩大热区——这会破坏语义和可访问性
真正影响可用性的不是图标大小，而是容器级的尺寸、定位和事件捕获链。改完记得在真机上用指尖测试，模拟器里永远看不出热区是否对齐。
