Bootstrap 5 必须用[data-bs-target]选择器而非li选中指示器，因其实际结构为button元素；正确写法是.carousel-indicators [data-bs-target]，兼容写法可选[data-bs-slide-to]；长条圆角需同步控制width、height与border-radius（如height:6px对应border-radius:3px），并清除opacity、filter等干扰以确保深色背景下的可见性。
Bootstrap 5 必须用 [data-bs-target] 选中指示器元素
bootstrap 5 的指示器不是 <li>，而是 <button data-bs-target="#xxx" data-bs-slide-to="0"></button>。写 .carousel-indicators li 根本不生效——浏览器开发者工具里一眼就能看到实际 dom 结构，别凭记忆硬套旧写法。
正确选择器是：.carousel-indicators [data-bs-target]。如果想兼容不确定版本，可用更稳的 .carousel-indicators [data-bs-slide-to]，它在 v4/v5 中都存在。
- v4 用户请改用
.carousel-indicators li，否则样式白写 - 混用时同时写两个选择器也行，但要注意 specificity 冲突（比如后写的规则被前一条覆盖）
- 别漏掉
.carousel-indicators前缀——单独写[data-bs-target]会污染全局 button
长条圆角形状的关键是宽高比 + border-radius
只设 border-radius: 3px 没用，如果 width: 24px、height: 6px，那它就是个「压扁的矩形」，border-radius 再大也撑不出圆角两端——因为圆角半径不能超过宽高一半。
要实现干净的长条圆角，必须同步控制三者：
-
width设为 20–30px（太窄难点击，太宽失去条感） -
height设为 6–8px（低于 5px 在小屏上易误触失效） -
border-radius设为height的一半，例如height: 6px→border-radius: 3px - 显式清除干扰：
background-color: #ccc、border: none（默认边框会盖住圆角）
深色背景上长条“消失”不是颜色问题，是对比度和透明度干扰
常见错觉：改了 background-color 还看不见，以为样式没生效。实际可能是：opacity: 0.7（某些主题 CSS 加的）、filter: grayscale() 或过浅的灰（如 #ccc 在黑色背景上几乎隐形）。
解决方式优先级从高到低：
- 检查 computed styles，确认没有
opacity或filter覆盖 - 把
background-color提亮到#e0e0e0以上 - 加描边：
border: 1px solid rgba(255,255,255,0.3) - 或用微阴影增强辨识：
box-shadow: 0 0 2px rgba(255,255,255,0.5)
别一上来就加 !important 盖全局，先定位具体哪条规则在捣鬼。
居中失效或错位，大概率是 transform 和 position 没配对
Bootstrap 默认靠 left: 50% + transform: translateX(-50%) 居中。你一改样式，很容易只删了 left 却留着 transform，结果指示器往左偏移自身宽度一半——看起来像“飘走了”。
要移到右下角等自定义位置，必须清干净：
- 删掉
left、margin-left、text-align - 设
transform: none（某些版本默认有transform: translateX(-50%)） - 确保父容器
.carousel有position: relative（Bootstrap 5 默认已有，但自定义 wrapper 时容易漏） - 用
bottom: 10px+right: 10px精确锚定，别混用left和right
响应式下错位？先查父容器有没有未重置的 padding 或 line-height，它们会让 top: 50% + transform 计算失准。
