Carousel指示器点的CSS类名是.carousel-indicators，其内部圆点由[data-bs-target]按钮的::before伪元素渲染，需通过覆盖.carousel-indicators [data-bs-target]::before样式控制大小、颜色等。
Carousel指示器点的CSS类名是什么
Bootstrap 5 的轮播图指示器点默认使用 .carousel-indicators 包裹，每个点是 <button> 元素，带 .active 类标识当前项。它们本身没有宽高，靠 ::before 伪元素渲染圆点——这是关键，直接改 button 的 width/height 不生效。
怎么覆盖默认圆点样式（Bootstrap 5）
必须通过重写 .carousel-indicators [data-bs-target]::before 的伪元素样式来控制大小和颜色。注意：Bootstrap 5 使用 data-bs-target 属性选择器，不是旧版的 data-slide-to。
- 圆点大小由
width和height控制，建议设为相同值实现正圆 - 颜色用
background-color，非color - 选中态要单独写
.carousel-indicators .active::before - 务必加
!important（或提高 CSS 优先级），否则被 Bootstrap 的内置样式覆盖
示例：
.carousel-indicators [data-bs-target]::before {
width: 12px !important;
height: 12px !important;
background-color: #6c757d !important;
}
.carousel-indicators .active::before {
background-color: #0d6efd !important;
}
为什么改了没反应？常见踩坑点
最常遇到的三个失效原因：
- 用了错误的选择器，比如写成
.carousel-indicators button::before—— Bootstrap 5 的按钮没有class，只靠data-bs-target属性匹配 - 漏掉
!important，Bootstrap 的 CSS 权重更高，尤其在 CDN 引入时 - CSS 文件加载顺序不对：你的自定义样式必须在 Bootstrap CSS 之后引入，否则被覆盖
如果用 Sass / SCSS 怎么更稳妥地定制
在 Bootstrap 源码基础上改，比硬覆盖更可靠。修改 $carousel-indicator-width 和 $carousel-indicator-active-bg 变量即可，然后重新编译 CSS。
-
$carousel-indicator-width: 12px;（默认是 10px） $carousel-indicator-height: $carousel-indicator-width;$carousel-indicator-active-bg: #0d6efd;- 注意：这些变量只在 Bootstrap 5.3+ 中完整支持，旧版可能需手动扩展
变量方式不会被 CSS 优先级问题干扰，也更容易维护，但需要构建流程支持 Sass 编译。
真正麻烦的不是改几个像素，而是得确认你用的是哪个 Bootstrap 版本、伪元素是否被其他样式劫持、以及有没有意外的父容器 overflow: hidden 把放大后的点裁掉了——这些细节不报错，但让调试变得无声无息。
