直接改width和height会失效，因为Bootstrap 5指示器使用[data-bs-target]元素（非li），其默认width为30px、height为3px且含border-radius:0.25rem，仅修改部分属性将因CSS层叠规则保留旧值，导致样式异常。
为什么直接改 width 和 height 会失效？
因为 bootstrap 5 的指示器默认用的是 [data-bs-target] 元素（不是 li），而它的原始样式里 width 是 30px、height 是 3px，且带 border-radius: 0.25rem。如果你只改其中一项，或没覆盖到正确选择器，浏览器会按层叠规则保留旧值——结果就是圆点没变、长条不出现、甚至边缘发虚。
.carousel-indicators [data-bs-target] 必须重写哪些 CSS 属性？
要稳定变成「长条」，这四条缺一不可：
-
width设为较大值（如30px），height设为小值（如4px） -
border-radius显式设为2px或0（别留默认的0.25rem） -
margin清零（否则默认有0 3px，会导致间距错乱） -
background-color单独定义（避免被透明背景干扰）
示例：
.carousel-indicators [data-bs-target] {
width: 30px;
height: 4px;
border-radius: 2px;
margin: 0 4px;
background-color: #ccc;
}
.carousel-indicators [data-bs-target].active {
background-color: #0d6efd;
}
Bootstrap 4 用户注意选择器差异
Bootstrap 4 不用 [data-bs-target]，而是用 li 标签作为指示器项。如果套用 5 的写法，样式完全不会生效。
- Bootstrap 4：用
.carousel-indicators li - Bootstrap 5：必须用
.carousel-indicators [data-bs-target] - 混用版本时，可用
.carousel-indicators li, .carousel-indicators [data-bs-target]同时命中（但注意 specificity 冲突）
长条指示器在深色背景上容易“消失”的原因
不是颜色没生效，是默认 background-color 太浅（如 #ccc）+ 深色背景导致对比度不足。更隐蔽的问题是：某些主题 CSS 给 [data-bs-target] 加了 opacity: 0.7，会让长条看起来像断开的虚线。
- 优先检查 computed styles 中是否有
opacity或filter干扰 - 深色背景建议把
background-color提亮到#e0e0e0以上，或加box-shadow: 0 0 2px rgba(255,255,255,0.5)增强辨识度 - 别依赖
!important盖全局 opacity，应定位到具体规则源头
margin 和 opacity 这两个隐形干扰项——它们不会报错，但会让长条看起来“断开”“偏移”或“半透明”。调样式时先打开浏览器开发者工具，逐项关掉 computed 中的 inherited 值，比反复猜更有用。
