Bootstrap轮播滑块异常：指示器不显示+图片高度无法调整

问题1：轮播指示器未显示 #

原因 #

使用Bootstrap 5时仍沿用Bootstrap 4的属性命名规则，且重复引入Bootstrap文件导致样式冲突：

• data-ride="carousel" 在Bootstrap 5中已废弃，需改为data-bs-ride="carousel"
• 指示器的data-target、控制按钮的data-slide需添加bs-前缀，改为data-bs-target、data-bs-slide
• 重复引入在线和本地Bootstrap资源，引发样式覆盖

修复代码（HTML部分） #

<!-- 修正轮播容器及指示器、控制按钮的属性 -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
  </ol>
  <!-- 轮播内容部分保持不变 -->
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

同时删除重复的本地Bootstrap引入：

<!-- 移除以下两行代码 -->
<link href="./assets/boostrap/bootstrap.min.css" rel="stylesheet" />
<script src="./assets/boostrap/bootstrap.bundle.min.js"></script>

问题2：轮播图片高度无法调整 #

原因 #

• 百分比高度需要父元素有明确高度值，否则无法生效
• .custom-slider未设置高度，导致.carousel-img的百分比高度无继承目标

修复方案（CSS部分） #

方案1：设置固定高度（推荐）

/* 给父容器设置固定高度 */
.custom-slider {
  height: 80vh; /* 可替换为具体像素值，如600px */
  overflow: hidden;
}

/* 让轮播项继承父容器高度 */
main .carousel-img {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

方案2：使用百分比高度（需层级设置）

/* 给根容器设置高度基准 */
.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* 设置轮播容器高度 */
.custom-slider {
  height: 80%;
}

main .carousel-img {
  height: 100%;
}

完整修复后的核心代码片段 #

HTML轮播部分 #

<main>
  <div class="custom-slider">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item carousel-img bg-img-1 active">
          <div class="carousel-caption d-none d-md-block">
            <h5>Noodles</h5>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat, aspernatur aliquid provident maxime a in est aliquam. Ab, dolores. Totam ipsa animi minima porro earum omnis itaque beatae delectus dolores?
            </p>
          </div>
        </div>
        <div class="carousel-item carousel-img bg-img-2">
          <div class="carousel-caption d-none d-md-block">
            <h5>SALAD</h5>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, suscipit dolorem sequi debitis obcaecati ea inventore dignissimos odit animi hic illum expedita dolore! Fugiat assumenda eaque culpa hic corrupti ipsam.
            </p>
          </div>
        </div>
        <div class="carousel-item carousel-img bg-img-3">
          <div class="carousel-caption d-none d-md-block">
            <h5>BURGER</h5>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos rerum natus ex eligendi. Commodi quia reiciendis nisi, earum explicabo dolor rerum porro fuga error pariatur at velit, temporibus, exercitationem eius!
            </p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</main>

CSS关键修改部分 #

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.custom-slider {
  height: 80vh;
  overflow: hidden;
}

main .carousel-img {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 保留原有其他CSS样式 */

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