必须使用[data-bs-target]选择器，Bootstrap 5指示器是带该属性的button元素；长条形需设width:24px、height:6px、border-radius:3px、gap:8px；右下角定位需absolute+bottom/right+transform:none；激活态应缩放或加阴影增强反馈。
必须用 [data-bs-target] 选择器，否则样式不生效
Bootstrap 5 的指示器是 <button> 元素，带 data-bs-target 和 data-bs-slide-to 属性，不是 <li>。写 .carousel-indicators li 完全匹配不到——开发者工具里一眼就能确认 DOM 结构。正确且推荐的选择器是：.carousel-indicators [data-bs-target]。如果要兼顾旧版或不确定环境，可加备用：.carousel-indicators [data-bs-slide-to]。
漏掉 .carousel-indicators 前缀会污染全局所有带 data-bs-target 的按钮；只写 [data-bs-target] 是危险的。
改成长条形状：宽高比 + border-radius + gap 缺一不可
默认圆点靠 width === height + border-radius: 50% 实现。要变长条，核心是打破等宽高，但不能只调尺寸——否则边缘发虚、间距错乱、小屏堆叠。
-
width设为24px（太窄难点，太宽失“条感”），height设为6px（低于5px在移动端易误触） -
border-radius必须显式设为3px（即height / 2），不能省略或留默认值 -
background-color和border: none要一起写，否则默认边框会盖住圆角 - 间距用
.carousel-indicators { gap: 8px; }，比给每个按钮加margin更稳定，且兼容 RTL
深色背景上若看不清，优先检查 computed styles 是否有 opacity: 0.7 或过浅的 background-color（如 #ccc），把颜色提亮到 #e0e0e0 以上，或加 border: 1px solid rgba(255,255,255,0.3)。
立即学习“前端免费学习笔记（深入）”；
移到右下角：删居中逻辑，用 position: absolute 锚定
默认居中靠 left: 50% + transform: translateX(-50%) 实现，这是“伪居中”，本质是硬偏移。要移到右下角，得彻底替换这套逻辑：
- 给
.carousel-indicators加position: absolute; bottom: 1rem; right: 1rem; - 必须显式写
transform: none;（某些版本自带transform: translateX(-50%)，不删会导致右偏失效） - 删掉所有
left、margin-left、text-align相关声明 - 确保父容器
.carousel有position: relative;（Bootstrap 5 默认已有，但自定义 wrapper 时容易漏）
移动端若被遮挡，加 z-index: 10 并检查轮播图内容是否设置了更高 z-index。
激活态增强反馈：别只改颜色，宽度/高度/缩放都要动
.active 态只改 background-color 很难被识别，尤其在密集长条场景下。有效做法是组合变化：
- 非 active 状态保持
height: 6px，active 状态放大到height: 8px（视觉差异比改 width 更明显） - 或用
transform: scale(1.2)，比单纯拉宽高更平滑，不影响布局流 - 加
box-shadow: 0 0 0 2px #0d6efd强化轮廓，浅色背景上尤其必要 - 避免仅靠
opacity: 1区分——默认非 active 是opacity: 0.5，对比度太低
响应式断点下，gap 和按钮尺寸需同步收缩，比如 @media (max-width: 576px) { .carousel-indicators [data-bs-target] { width: 16px; } .carousel-indicators { gap: 4px; } }。最容易被忽略的是 gap 和 opacity 这两个隐形干扰项——它们不会报错，但会让样式看起来“半生效”。
