Bootstrap Carousel Slider指示器无法变为圆形问题求助

问题根源是Bootstrap 5默认给.carousel-indicators button设置了flex: 1 1 auto样式，这个属性会让按钮在容器中自动拉伸宽度，导致实际宽度大于你设置的10px，宽高不一致后，border-radius: 50%就会显示为椭圆而非圆形。

解决方法 #

在你的CSS规则中添加flex: none来覆盖Bootstrap的默认flex属性，确保按钮严格遵循你设置的宽高：

.carousel-inner img {
  height: 130vh;
  object-fit: cover;
}

/* Carousel Indicators Rounded */
.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  /* 关键：禁止flex拉伸，固定宽高 */
  flex: none;
  /* 可选：调整指示器之间的间距 */
  margin: 0 4px;
}

完整代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!-- Carousel Slider -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button"  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" ></button>
    <button  type="button"  data-bs-target="#carouselExampleIndicators"  data-bs-slide-to="2"  aria-label="Slide 3"></button>
    <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4" ></button>
  </div>

  <!-- Carousel Items -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/536/354" class="d-block w-100" alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/536/354" class="d-block w-100" alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/536/354" class="d-block w-100" alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/536/354" class="d-block w-100" alt="..." />
    </div>
  </div>
</div>

添加flex: none后，按钮会保持你设置的10px×10px尺寸，此时border-radius: 50%就能正确渲染为圆形。如果需要调整指示器之间的间距，可以通过margin属性自定义。

内容的提问来源于stack exchange，提问作者Karthick