bootstrap 5 必须用[data-bs-target]选中指示器，因实际结构为button而非li；需同步设置width、height、border-radius（如height:6px对应border-radius:3px），并清除opacity、filter等干扰以确保可见性。
Bootstrap 5 必须用 [data-bs-target] 选中指示器元素
写 .carousel-indicators li 在 Bootstrap 5 里完全无效——DOM 里根本没有 li，实际结构是 button[data-bs-target]。打开开发者工具一眼就能确认。选错选择器，后面所有 CSS 都白写。稳妥写法是：.carousel-indicators [data-bs-target]；如果想兼容 v4/v5，可用 .carousel-indicators [data-bs-slide-to]，它在两个版本中都存在。
width、height、border-radius 必须同步改
只调 border-radius 或只改 width，结果大概率还是“糊状长条”或边缘发虚。关键不是单点修改，而是三者协同：
-
width设为 20–30px（太窄难点，太宽失去条感） -
height设为 4–8px（低于 4px 在小屏易误触失效） -
border-radius建议设为height的一半，比如height: 6px→border-radius: 3px，两端才自然圆润 - 必须显式加
background-color和border: none，否则默认透明边框会干扰圆角渲染
激活态和间距要单独处理
默认的 .active 只变色，对长条反馈太弱。常见做法是加粗或延展：
-
.carousel-indicators [data-bs-target].active { background-color: #0d6efd; width: 24px; }（比非 active 宽一倍） - 别靠
margin-right控制间距——容易在 RTL 或响应式下错位。改用.carousel-indicators { gap: 8px; }更稳 - 小屏下长条可能堆叠或溢出：加
.carousel-indicators { flex-wrap: nowrap; }，再配合媒体查询收紧尺寸
深色背景上长条“消失”不是颜色没生效
改完样式却看不见？大概率是以下干扰没清掉：
- 主题 CSS 给
[data-bs-target]加了opacity: 0.7或filter: grayscale() -
background-color: #ccc在黑色背景上对比度不足（建议提亮到#e0e0e0以上） - 某些定制主题偷偷加了
box-shadow或backdrop-filter，掩盖了长条本身
最直接的办法：打开浏览器“计算样式”，逐项检查 opacity、filter、background-color 是否被意外覆盖。长条指示器真正难调的不是形状，而是这些隐性样式冲突。
