Bootstrap怎么修改Carousel轮播图指示器为长条圆角形状-Bootstrap教程-PHP中文网

因为bootstrap 5指示器默认是正方形元素，只设border-radius而width远大于height（如30px×3px）会导致视觉上呈长条；需同步设置相等的width/height和border-radius: 50%才能显示为圆点。

为什么改了 `border-radius` 圆点还是长条？

因为 bootstrap 5 的指示器默认是正方形元素（[data-bs-target]），靠 width、height 和 border-radius: 50% 共同撑出圆形。如果只设 border-radius，但 width 远大于 height（比如默认 30px × 3px），那它本质就是个「被压扁的圆」——视觉上就是长条，再大的 border-radius 也救不回来。

`.carousel-indicators [data-bs-target]` 宽高怎么设才像长条？

长条圆角形状 = 矩形 + 两端圆角，核心是让宽高比明显大于 1（比如 20px × 6px），再配合适当的 border-radius 控制圆角大小。不能直接用 rounded-pill 类——那是给按钮/图片用的，对指示器无效。

width 设为 20–30px，height 设为 6–8px（太细会看不清，太粗就失去“条”感）
border-radius 值建议设为 height 的一半左右（如 height: 6px → border-radius: 3px），这样两端刚好半圆
必须显式清除默认背景色和边框干扰：background-color: #ccc、border: none
激活态用 background-color: #0d6efd 即可，不用改尺寸

示例 CSS：

.carousel-indicators [data-bs-target] {
  width: 24px;
  height: 6px;
  border-radius: 3px;
  background-color: #ccc;
  border: none;
}
.carousel-indicators [data-bs-target].active {
  background-color: #0d6efd;
}