默认 .carousel-indicators 圆点无法直接用 border-radius 改成条状，是因为 bootstrap 硬编码了 border-radius: 50% 和固定宽高，且自定义样式易被覆盖；需在 bootstrap css 后重写 [data-bs-slide-to] 的 width、height、border-radius 并用 box-sizing: content-box 扩展点击热区。
为什么默认的 .carousel-indicators 圆点无法直接用 border-radius 改成条状
Bootstrap 的 .carousel-indicators 默认使用 li + button 结构，每个指示器是独立的圆形 button，且 Bootstrap 4/5 都硬编码了 border-radius: 50% 和固定宽高（如 width: 10px; height: 10px;）。直接改 border-radius 不生效，是因为它被更高优先级的 CSS 覆盖，而且宽度高度不对称时会变形。
覆盖样式前必须确认当前 Bootstrap 版本和加载顺序
Bootstrap 5.3+ 使用 data-bs-slide-to 属性，而旧版用 data-slide-to；样式类名一致，但部分工具链（如 Vue CLI 或 Vite）可能提前注入 Bootstrap CSS，导致你的自定义 CSS 被忽略。务必把自定义样式放在 Bootstrap CSS 之后，或用 !important 做兜底（仅限调试阶段）。
- 检查浏览器开发者工具中
.carousel-indicators [data-bs-slide-to]的最终计算样式，确认border-radius是否被覆盖 - 如果用 Sass 编译，可在
_carousel.scss后重写.carousel-indicators li button - 避免用 ID 或行内 style，保持可维护性
真正起效的条状指示器 CSS 写法
核心是重置圆点的尺寸和圆角，并统一横向排列间距。以下代码兼容 Bootstrap 5（对 4 基本可用，只需把 data-bs-slide-to 换成 data-slide-to）：
.carousel-indicators [data-bs-slide-to] {
width: 24px;
height: 4px;
border-radius: 2px;
margin: 0 6px;
}
.carousel-indicators [data-bs-slide-to].active {
width: 32px;
background-color: #0d6efd;
}
注意三点：
-
height必须设为固定值（不能用em或rem），否则响应式下易错位 -
margin控制条与条之间的间隙，padding无效（按钮内部无内容） - 激活态用更宽的
width实现“滑动条”效果，而非靠background渐变——后者在 Safari 下有渲染延迟
移动端点击区域太小怎么办
把指示器压扁成 4px 高后，手指点击容易误触。Bootstrap 默认没给 button 设置 min-width 或 padding，所以需要显式扩大可点击区域：
.carousel-indicators [data-bs-slide-to] {
width: 24px;
height: 4px;
border-radius: 2px;
margin: 0 6px;
/* 扩展点击热区 */
padding: 8px;
/* 防止 padding 影响布局 */
box-sizing: content-box;
}
关键在 box-sizing: content-box：这样 padding 会向外撑开，不挤压条本身尺寸，同时保证视觉仍是细条，但手指点 anywhere 都能命中。
条状指示器真正的难点不在样式本身，而在确保它在所有断点下都保持水平居中、不换行、不被截断——尤其当轮播图项超过 7 个时，.carousel-indicators 容器宽度可能溢出父容器。这时候得配合 flex-wrap: nowrap 和 overflow-x: auto 做滚动支持，而不是强行缩放。
