默认的.carousel-indicators无法直接改成条状，因其button元素硬编码了width/height相等、border-radius:50%及固定尺寸，仅改单一属性会失真或被高优先级样式覆盖。
为什么默认的 .carousel-indicators 不能直接改成条形
Bootstrap 的 .carousel-indicators 默认用 <button></button> + border-radius: 50% 实现圆点，样式写死在 CSS 里（比如 width: 10px; height: 10px;），直接改宽高会失真或被其他规则覆盖。关键是它依赖 data-bs-slide-to 属性做激活控制，不能删掉或替换结构。
替换指示器 HTML 结构但保留 Bootstrap 控制逻辑
必须保留原生的 <button></button> 元素和 data-bs-slide-to 属性，否则轮播切换会失效。只需把内部内容从空改为一个 <span></span>，再用 CSS 控制外形：
<div class="carousel-indicators"> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" aria-label="Slide 1"><span></span></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"><span></span></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"><span></span></button> </div>
- 不要用
<div> 或自定义标签替代 <code><button></button>，否则data-bs-slide-to不生效 - 不要删掉
aria-label，否则影响无障碍访问 -
<span></span>是为了方便单独样式化，避免干扰按钮本身的尺寸和交互区域
用 CSS 覆盖默认圆点样式为条形
重点是重置 button 的外观，同时确保激活态（.active）有明显区分。Bootstrap 5.3+ 的指示器默认使用 flex 布局，所以直接改 width/height 和 border-radius 即可：
.carousel-indicators [data-bs-slide-to] {
width: 24px;
height: 4px;
border-radius: 2px;
background-color: #ccc;
}
.carousel-indicators [data-bs-slide-to].active {
background-color: #0d6efd;
width: 32px; /* 激活态稍长，增强视觉反馈 */
}
- 必须用
[data-bs-slide-to]选择器，比button更精准，避免影响其他按钮 - 不要只改
background-color，不设width/height会导致条形“看不见”——因为原始圆点是靠padding和border-radius塑形的 - 如果条形间距太小，加
margin-inline: 4px（注意是 inline 方向，适配 RTL）
响应式下条形长度需要微调吗
一般不需要额外媒体查询。Bootstrap 的 .carousel-indicators 本身没做响应式缩放，条形宽度固定反而更稳定。但如果项目要求移动端缩短条形，可加：
@media (max-width: 768px) {
.carousel-indicators [data-bs-slide-to] {
width: 18px;
}
.carousel-indicators [data-bs-slide-to].active {
width: 24px;
}
}
真正容易忽略的是：条形高度低于 3px 时，在部分屏幕（尤其是高 DPI 设备）上可能渲染模糊或消失，建议最小保持 height: 3px。
