轮播图指示器圆点的 CSS 类名是 .carousel-indicators 里的 li；需同时设置 width、height、border 等属性，避免仅改 background-color 导致形变或响应式失效。
轮播图指示器圆点的 CSS 类名是 .carousel-indicators 里的 li
bootstrap 的轮播图（carousel）默认用 <ol class="carousel-indicators"></ol> 包裹一串 <li>，每个 <li> 对应一个圆点。样式控制权完全在 css，不靠 js 或 data 属性。
常见错误是直接改 .carousel-indicators li 的 background-color 却没重置 border、width/height，结果圆点变成长条或边缘模糊；或者用了 !important 强顶，后续响应式断点失效。
- 必须同时覆盖
width、、<code>border-radius、background-color和border - 选中态（当前激活页）由
.active类控制，要单独写.carousel-indicators li.active - 如果项目用了 Bootstrap 5+，注意
.carousel-indicators默认有flex布局，margin可能被重置，建议用gap控制间距
修改圆点大小和颜色的最小可行 CSS
不用动 HTML 结构，只加一段自定义 CSS 就行。关键是优先级要压过 Bootstrap 默认样式（比如用更具体的类名或同级选择器）。
.carousel-indicators [data-bs-target] {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ccc;
border: 2px solid #fff;
}
.carousel-indicators [data-bs-target].active {
background-color: #0d6efd;
transform: scale(1.2);
}
说明：[data-bs-target] 是 Bootstrap 5+ 中指示器 <li> 的实际选择器（它带这个属性），比单纯写 li 更精准，避免误伤其他列表；transform: scale() 比改宽高更平滑，且不影响布局流。
- Bootstrap 4 用户请把
[data-bs-target]换成li，因为 4 版用的是data-target - 如果圆点没变小，检查是否被其他 CSS（比如全局
li { ... }）污染，加!important是下策，优先提升选择器特异性 - 深色背景上记得调亮
border颜色，否则圆点会“消失”
让圆点变成方块、三角或图标需要改什么
圆点本质是 border-radius: 50% 的正方形。想变方块？删掉那行；想变三角？得用伪元素或 SVG；想用图标？得换 HTML 结构或用字体图标。
- 方块：删掉
border-radius，保持width/height相等即可 - 三角（向下）：用
::after伪元素 +border技巧，但要注意position: absolute需要父容器position: relative - 图标：Bootstrap 5 不支持直接塞
<i></i>进指示器，得用 JS 动态替换innerHTML，或者改用自定义轮播组件
性能提示：纯 CSS 方案（方块/圆角矩形）无额外开销；用伪元素三角对渲染影响极小；但每项插入 SVG 或字体图标会增加 DOM 节点和字体加载压力，移动端慎用。
响应式下圆点错位或堆叠了怎么办
错位通常是因为父容器 .carousel-indicators 的 padding 或 margin 在断点里被重写，或者子 li 的 flex 行为在小屏下没约束好。
- Bootstrap 5 默认用
display: flex，确保.carousel-indicators没被意外设成inline-flex或block - 加
flex-wrap: wrap并配justify-content: center可防超宽后换行错位 - 小屏下圆点太挤？用媒体查询缩小
width/height，但别小于 8px，否则触控难命中 - 真遇到堆叠，检查是否误加了
position: absolute到li上——指示器必须保持文档流内定位
最常被忽略的一点：自定义 CSS 文件必须在 Bootstrap CSS 之后引入，否则规则被覆盖。不是“写了就生效”，是“顺序决定谁说话算数”。
