bootstrap 5 的 carousel 指示器默认为圆点，因其 button 元素通过 width/height 相等 + border-radius: 50% 实现；改为条状需覆盖 width > height、调小 border-radius、添加 margin，并适配 active 态宽度与颜色及响应式折行。
carousel指示器为什么默认是圆点
bootstrap 5 的 carousel-indicators 默认用 ::before 伪元素 + border-radius: 50% 渲染成圆点，本质是通过 width/height 相等 + 圆角实现的。想改成条状（比如短横线），关键不是“替换元素”，而是覆盖它的尺寸和圆角逻辑。
直接覆盖 CSS 的 width/height/border-radius
最稳妥的方式是在自定义 CSS 中提高权重，重置指示器按钮的样式。注意：必须针对 .carousel-indicators 下的 button（Bootstrap 5 用 button 替代了旧版的 li+span）：
.carousel-indicators [data-bs-target] {
width: 12px;
height: 4px;
border-radius: 2px;
margin: 0 4px;
}
-
width大于height才能形成横向短条，具体值按设计调整 -
border-radius别设为0，否则边缘太硬；2px左右更柔和 - 务必加
margin避免条与条粘连——Bootstrap 默认没设 margin，靠 padding 撑开，但条状更依赖显式 margin - 如果用了 Sass，推荐在
$carousel-indicator-width等变量后覆盖，而非硬写 px 值
active 状态下条变粗或变色要单独处理
默认 active 状态只改背景色，条状指示器常需更明显反馈，比如加粗或延长：
.carousel-indicators [data-bs-target].active {
width: 24px; /* 比非 active 宽一倍 */
background-color: #0d6efd; /* 主色比默认灰更醒目 */
}
- 别只改
background-color，否则 active 和非 active 看不出宽度差异 - 如果项目用了 CSS 变量（如
--bs-primary），优先用变量保持主题一致性 - 慎用
transform: scaleX()动画——Bootstrap 的 indicator 切换无过渡，硬加可能造成闪烁
响应式下条状指示器容易挤变形
小屏时指示器容器宽度不足，多个条状元素可能换行或溢出。Bootstrap 本身没做条状适配，得手动兜底：
@media (max-width: 576px) {
.carousel-indicators {
flex-wrap: wrap;
}
.carousel-indicators [data-bs-target] {
width: 8px;
height: 3px;
}
}
- 用
flex-wrap: wrap允许折行，比隐藏或缩小更可控 - 移动端建议把条宽缩到
8px以内，否则在 3–4 个图时容易撑出容器 - 别依赖
carousel-caption的 padding 来“推”指示器位置——它和 indicators 是兄弟节点，布局无关
条状指示器真正麻烦的不是改形状，而是 active 态反馈是否清晰、小屏是否仍可操作、以及和轮播图整体节奏是否协调。改完记得在真机上滑动测试——有些安卓 WebView 对 button 的 focus 样式有额外边框，会破坏条形效果。
