圆点改方块或三角需调整border-radius或用伪元素：方块设border-radius:0，三角形用border+transform居中；选[data-bs-target]而非li因Bootstrap 5已弃用li结构。
如何把圆点改成方块或三角？关键在border-radius和content
Bootstrap 5 的指示器默认是圆点，本质是 [data-bs-target] 元素（不是 li）被设了 border-radius: 50%。要改形状，直接动这个值就行：
- 方块：删掉
border-radius，或设为0 - 圆角矩形：设
border-radius: 4px或8px - 三角形：不用
border-radius，改用伪元素 +border技巧（比如border-top: 6px solid #0d6efd; border-left: 6px solid transparent; border-right: 6px solid transparent;），再配合transform: translateY(-50%)居中
注意：如果用了伪元素重绘（如 ::before），记得把原生 [data-bs-target] 的背景、宽高清空，否则会叠在一起。
[data-bs-target] 选择器为什么比 li 更安全？
Bootstrap 5 渲染指示器时，生成的是 ，不是 li。所以写 .carousel-indicators li 根本不匹配——样式压根不会生效。
- 正确写法：
.carousel-indicators [data-bs-target] - 错误写法：
.carousel-indicators li（Bootstrap 4 才用li，5 已废弃） - 如果仍想兼容旧版或不确定结构，可用属性选择器组合：
.carousel-indicators [data-bs-slide-to]，更稳
浏览器开发者工具里检查元素，一眼就能看到实际标签和属性，别凭记忆硬套。
指示器居中失效？大概率是transform和position没配对
Bootstrap 5 的 .carousel-indicators 默认是 position: absolute; left: 50%; transform: translateX(-50%) 实现居中。但如果你加了自定义样式，很容易破坏这个组合：
- 删了
left: 50%却留着transform: translateX(-50%)→ 指示器会从左边缘往左偏移自身宽度一半 - 加了
right: 10px却没删left和transform→ 定位冲突，行为不可预测 - 父容器（
.carousel）没设position: relative→ 指示器会相对于body定位，飘到页面任意角落
要右下角定位，就干净地写：position: absolute; bottom: 1rem; right: 1rem; transform: none;，别留“半截”旧规则。
响应式下指示器错位？先查padding和line-height
伪元素（如 ::before）在小屏幕下偏移，常见原因是父容器有未重置的 padding 或 line-height，导致 top: 50% + transform: translate(-50%, -50%) 计算基准偏了。
- 给
.carousel-indicators [data-bs-target]加line-height: 1;和font-size: 0;，消除文字基线干扰 - 确保
.carousel或其 wrapper 没意外的padding-bottom（尤其用 Sass 变量生成时） - 移动端用
@media (max-width: 576px)单独重设bottom值，比如从1rem改成0.5rem，避免遮挡内容
最麻烦的不是写错样式，而是多个 CSS 层级叠加后，transform 的坐标系已经不是你以为的那个“中心”。调试时关掉其他样式，只留定位相关规则，反而最快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
