bootstrap carousel指示器默认样式定义在css文件中，由.carousel-indicators [data-bs-target]及其::before伪元素实现，通过border-radius: 50%和固定宽高（如width: 30px; height: 3px）生成圆点；改为条状需覆盖width、height、border-radius: 0，并确保::before渲染逻辑生效。
Carousel指示器默认样式在哪定义
Bootstrap 的 Carousel 指示器（即底部小圆点）默认是用 .carousel-indicators 下的 button 元素 + ::before 伪元素实现的圆形。样式定义在 Bootstrap 的 CSS 文件中，具体是 .carousel-indicators [data-bs-target] 和其 ::before 伪元素，其中 border-radius: 50% 和固定宽高决定了它是圆点。
要改成条状，核心就是覆盖这两个关键声明：去掉 border-radius，拉长宽度，压扁高度，并对齐居中。
覆盖指示器样式的关键 CSS 规则 直接在你的自定义 CSS 中添加以下规则即可生效（注意需在 Bootstrap CSS 之后加载）：
重点不是新增类，而是精准覆盖原有选择器权重：
.carousel-indicators [data-bs-target] {
width: 24px;
height: 4px;
border-radius: 0;
margin: 0 6px;
}
.carousel-indicators [data-bs-target]::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #adb5bd;
}
.carousel-indicators .active {
background-color: #0d6efd !important;
}
.carousel-indicators .active::before {
background-color: #0d6efd;
}
说明：
-
width和height控制条的尺寸，建议保持height≤ 6px 避免和文字/间距冲突 - 必须显式设
border-radius: 0，否则 Bootstrap 的50%会继承 -
.active的背景色要用!important或更高权重选择器，因为 Bootstrap 默认用background-color+opacity混合，容易被覆盖不全 - 不要删掉
::before，Bootstrap 5+ 依赖它渲染指示器，直接改button背景可能失效
为什么不能只改 button 的 background-color
因为 Bootstrap 5 的指示器逻辑是：按钮本身透明，靠 ::before 渲染视觉块；且 .active 状态是通过 JS 切换 .active 类，再由 CSS 控制 ::before 的颜色。如果只改 button 的 background-color，::before 仍按原样式绘制，会出现“双层”或“错位”现象。
常见错误现象：
- 条状显示但点击后 active 不变色 → 没覆盖
.carousel-indicators .active::before - 条变成圆角矩形 → 忘了设
border-radius: 0，或被其他 CSS 覆盖 - 条横向挤在一起、没间距 → 没重设
margin，Bootstrap 默认是margin: 0 2px，太窄
适配不同版本 Bootstrap 的注意事项
Bootstrap 4 和 5 的指示器结构一致，但属性名略有差异：
- Bootstrap 4：用
data-slide-to，CSS 选择器是.carousel-indicators li+button - Bootstrap 5：用
data-bs-target，结构是.carousel-indicators button，且移除了li包裹 - 如果你用的是 Bootstrap 5.3+，确认你没启用
data-bs-ride="carousel"的自动初始化干扰样式加载顺序
最稳妥的做法：始终以 .carousel-indicators button 和 ::before 为目标，不依赖 li 或 span。
