Bootstrap轮播内容未显示在切换箭头之间的问题求助

问题根源 #

Bootstrap的轮播控制按钮（carousel-control-prev/carousel-control-next）是基于.carousel容器做绝对定位的，默认贴在容器左右两侧。你的轮播项（carousel-item）内的内容既没做居中对齐，也没避开按钮区域，导致视觉上内容不在两个箭头之间。另外要确认你是否正确引入了Bootstrap的CSS文件——你当前引入的main.css需要确保已经导入了Bootstrap核心样式，否则布局会直接错乱。

解决方案 #

方案1：给轮播项加内边距并居中内容

直接通过CSS调整轮播项的内边距，让内容避开左右按钮区域，同时居中显示：

.carousel-item {
  padding: 0 5rem; /* 可根据按钮实际宽度调整，默认按钮宽度约4rem */
  text-align: center;
}

方案2：用Bootstrap内置工具类实现居中

利用Bootstrap的flex布局工具类，让内容在轮播项中垂直水平居中，同时给轮播容器设置最小高度避免内容过矮：

<div id="projectsCarousel" class="carousel slide carousel-fade carousel-dark" style="min-height: 200px;">
  <div class="carousel-inner h-100">
    <div class="carousel-item active d-flex justify-content-center align-items-center h-100">
      <h3>hello</h3>
    </div>
    <div class="carousel-item d-flex justify-content-center align-items-center h-100">2</div>
    <div class="carousel-item d-flex justify-content-center align-items-center h-100">3</div>
    <div class="carousel-item d-flex justify-content-center align-items-center h-100">4</div>
    <div class="carousel-item d-flex justify-content-center align-items-center h-100">5</div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#projectsCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#projectsCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

额外检查 #

确认你的main.css文件中已经正确导入Bootstrap的CSS：

/* 在main.css顶部添加 */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

如果没有这一步，Bootstrap的核心样式不会生效，也会导致轮播布局异常。

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