Bootstrap 4布局下图片过大导致页面出现滚动条问题求助

问题原因 #

• Bootstrap 4 中.row类默认自带左右-15px的外边距，外层.container-fluid设置px-0后，.row的负边距会导致容器整体宽度超出视口，出现横向滚动条。
• 你使用的图片原始尺寸过大，即使加了.img-fluid仅能保证宽度适配父容器，高度仍会撑大页面，出现多余的纵向滚动。

解决方案 #

修改代码按照以下规则调整即可：

1. 给.row元素添加mx-0类，清除默认的左右负外边距
2. 给存放图片的.col-lg-6元素添加px-0类，清除列默认的左右内边距
3. 给图片添加自定义样式限制最大高度，同时保证图片比例不变，避免撑高页面

修改后的完整代码如下：

<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<style>
.fit-img {
  max-height: 100vh;
  width: 100%;
  object-fit: cover;
}
</style>

<!-- Body -->
<section class="container-fluid px-0">
  <div class="row align-items-center mx-0">
    <div class="col-lg-6">
      <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
      </div>
    </div>
    <div class="col-lg-6 px-0">
      <img class="img-fluid fit-img" src="https://via.placeholder.com/4000x500.svg" alt="">
    </div>
  </div>
</section>

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