直接修改.carousel-indicators [data-bs-target]（Bootstrap 5+）或li（Bootstrap 4）即可生效，但仅改background-color会导致圆点变形、响应式失效，因必须同时设置width、height、border-radius: 50%、border及.active增强样式。
直接改 .carousel-indicators 下的 [data-bs-target]（Bootstrap 5+）或 li（Bootstrap 4）就能生效，不用动 HTML 或 JS；但只改 background-color 会出错——圆点变形、响应式失效、选中态不显眼，都是因为漏了关键属性。
为什么改了 background-color 圆点还是长条？
Bootstrap 的指示器圆点本质是带边框的正方形，靠 width、height 和 border-radius: 50% 共同撑出圆形。只设 background-color，而没重置默认的 width/height（Bootstrap 5 默认是 30px×30px）、border（常为透明或细线），就会导致视觉拉伸或边缘模糊。
- 必须同时设置
width和height为相等值（如10px） - 必须显式写
border-radius: 50%，不能依赖继承 - 建议加
border（如2px solid #fff），尤其在深色背景上防“消失” - Bootstrap 5+ 推荐用
[data-bs-target]替代li选择器，更精准，避免误伤其他列表项
如何让选中态（active）更明显？
激活项由 .active 类控制，它和普通项共用同一组基础样式，所以必须单独覆盖。光改颜色不够，容易被忽略；加缩放或阴影更可靠。
- 写
.carousel-indicators [data-bs-target].active（5+）或.carousel-indicators li.active（4）确保优先级足够 - 推荐用
transform: scale(1.3)，比单纯放大宽高更平滑，不影响布局流 - 可叠加
box-shadow: 0 0 0 2px #0d6efd强化轮廓，尤其在浅色背景上 - 避免仅靠
opacity: 1区分——非 active 项默认 opacity 是 0.5，对比度低
移动端或深色背景下容易踩的坑
指示器在小屏或暗色主题里极易“隐形”，不是代码错了，而是视觉适配没跟上。
- 深色背景上，把
border颜色调亮（如#fff），否则圆点只剩一个灰影 - 移动端窄屏时，指示器可能被轮播图内容遮挡或挤出可视区——加
z-index: 10并确认父容器.carousel有position: relative - 如果用了
gap控制间距（Bootstrap 5+ 默认 flex 布局），别再写margin，否则断点下间距错乱 - 全局 CSS 里若有
li { margin: 0.5em 0; }这类重置，会污染指示器，优先用更具体的选择器覆盖
最简可行样式里，width/height/border-radius/background-color/border 这五项缺一不可；.active 的增强处理不是锦上添花，而是可用性底线——用户得一眼看出当前在哪一页。
