如何解决Bootstrap Carousel溢出导致横向滚动的问题？

我正在使用Bootstrap搭建作品集，页面顶部的Carousel出现溢出情况，导致页面产生横向滚动。需要让Carousel适配浏览器尺寸且无溢出，同时保持现有的响应式特性。

Carousel HTML代码 #

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
          <div class="carousel-item active">
              <img src="img/animewallpaper7.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
              <img src="img/animewallpaper8.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
              <img src="img/animewallpaper9.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
              <img src="img/animewallpaper6.jpg" class="d-block w-100" alt="...">
          </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-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-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>
  </div>

我的CSS代码 #

/* Ensure the carousel spans the full width of its container */
.carousel {
    width: 100%;
    margin: 0 auto; /* Center the carousel within its container */
    
}

/* Remove extra padding and margin around the images */
.carousel-item img {
    width: 100%;  /* Ensures the image covers the full width of the item */
    height: 600px; /* Adjusts the height based on the width */
}

解决方案 #

横向溢出通常来自Carousel控件（前后箭头）的默认超出范围，或是图片尺寸设置导致的容器溢出，按以下步骤修复：

1. 隐藏容器溢出内容
   给.carousel添加overflow:hidden，确保超出容器的元素被裁剪：

.carousel {
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* 新增：隐藏溢出内容 */
}

2. 保持图片比例避免变形溢出
   固定高度可能导致图片拉伸或超出容器，用object-fit:cover维持图片比例的同时填满容器：

.carousel-item img {
    width: 100%;
    height: 600px;
    object-fit: cover; /* 新增：保持图片比例，填充容器 */
}

3. 重置父容器默认内边距
   Bootstrap的<body>默认带有padding-right，可能导致横向滚动，直接重置：

body {
    padding-right: 0 !important;
    margin: 0;
}

4. 优化响应式高度
   固定高度在小屏幕体验不佳，用媒体查询适配不同设备：

@media (max-width: 768px) {
    .carousel-item img {
        height: 300px; /* 移动端降低图片高度 */
    }
}

调整后Carousel会完全适配浏览器宽度，无横向滚动且保留响应式特性。

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