bootstrap 5 指示器是 button[data-bs-target] 而非 li，须用 [data-bs-target] 或 [data-bs-slide-to] 选择器；改圆点需重写 ::before 伪元素并加 !important；长条样式需同步 width/height/border-radius；间距用 gap 控制，响应式用 flex-wrap 和媒体查询。
直接改 .carousel-indicators li 无效——Bootstrap 5 的指示器根本不是 li，而是 button[data-bs-target] 元素，选错选择器，后面所有 CSS 都不会生效。
必须用 [data-bs-target] 或 [data-bs-slide-to] 选中指示器
打开浏览器开发者工具，展开 .carousel-indicators，你会看到里面全是 button，带 data-bs-target 和 data-bs-slide-to 属性，没有 li。所以：
-
.carousel-indicators [data-bs-target]是 Bootstrap 5 唯一可靠的选择器 - 想兼容 v4/v5？用
.carousel-indicators [data-bs-slide-to]，它两个版本都支持 - 别写
.carousel-indicators button——太宽泛，容易误匹配其他按钮 - 务必带上
.carousel-indicators前缀，避免污染全局button
改小圆点：重写 ::before 伪元素
Bootstrap 5.3+ 的圆点由 [data-bs-target]::before 渲染，不是按钮本身。直接改按钮的 background-color 没用。
- 设大小：
width: 10px; height: 10px; border-radius: 50%; - 设颜色：
background-color: #6c757d;（未激活态） - 激活态单独写：
.carousel-indicators [data-bs-target].active::before { background-color: #0d6efd; } - 必须加
!important或提高选择器权重，否则被 Bootstrap 内置样式覆盖
改成长条：width、height、border-radius 必须同步调
只改 width 或只清 border-radius，结果不是糊状长条，就是边缘发虚。
- 推荐组合：
width: 24px; height: 6px; border-radius: 3px;（border-radius=height / 2） - 激活态增强反馈：
.carousel-indicators [data-bs-target].active { width: 32px; background-color: #0d6efd; } - 显式写
border: none;，防止默认透明边框干扰圆角渲染 - 深色背景上别用
#ccc，改用#e0e0e0或加border: 1px solid rgba(255,255,255,0.2)
控制间距和响应式：用 gap，别碰 margin
.carousel-indicators 是 flex 容器，gap 是原生、方向自适应、不依赖书写模式的方案。
- 写在父容器上：
.carousel-indicators { gap: 8px; } - 防小屏堆叠：
.carousel-indicators { flex-wrap: nowrap; } - 移动端收紧：
@media (max-width: 576px) { .carousel-indicators [data-bs-target] { width: 16px; } .carousel-indicators { gap: 4px; } } - 检查 computed styles，确认没被
opacity: 0.7或filter覆盖——它们会让长条看起来断开或半透明
真正难调的从来不是圆角数值，而是那些看不见的干扰项：opacity、filter、flex-wrap 默认行为、以及 CSS 加载顺序。动手前先打开开发者工具，关掉 inherited 样式，比反复试 border-radius 省力得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
