如何消除Bootstrap container-fluid右侧内边距 让图片贴紧屏幕右边缘

问题根源 #

你遇到的右侧空白来自Bootstrap栅格系统的默认样式：

• container-fluid 默认自带左右各15px的内边距
• col-* 类默认自带左右各15px的内边距（栅格间距gutter）
• 你给右侧图片设置了固定宽度600px，屏幕宽度较大时无法撑满列宽，也会额外产生空白

解决方案 #

用Bootstrap5自带的工具类即可快速修复，不需要额外写自定义CSS，修改后对应代码如下：

<!-- 冗余的.container-fluid宽度样式可以直接删除 -->
<div class="container-fluid px-0" style="background-color:#101010;">
  <div class="row g-0">
    <div class="col-lg-6 ps-lg-3">
      <div style="padding-top:100px;">
        <center>
          <img src="https://assets.airtel.in/static-assets/homes/img/black-logo.png" style="width:160px;"><br><br><br>
          <span style="font-size:2rem;color:white;">Introducing Airtel Black</span><br><br>
          <span style="color:white; font-size:20px;">Mobile. DTH. Fiber. Combine any two or more services in one plan.</span><br><br>
          <button style="background-color:#4D0D0A;width:220px;color:white;border:none;border-radius:50px;padding:17px;font-size:19px;">JOIN NOW</button>
        </center>
      </div>
    </div>
    <div class="col-lg-6">
      <img src="https://assets.airtel.in/static-assets/homes/img/main-img_new.jpg" style="width:100%;height:auto;">
    </div>
  </div>
</div>

修改说明 #

• 给container-fluid添加px-0类，直接移除默认的左右内边距
• 给row添加g-0类，移除该行下所有列的默认栅格间距
• 给左侧col-lg-6添加ps-lg-3类，仅在大屏下保留左内边距，避免左边内容贴到屏幕边缘影响美观
• 把右侧图片的固定宽度改为width:100%;height:auto;，让图片自适应列宽，自动撑满后就会紧贴屏幕右边缘

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