Bootstrap布局出现异常空白，右侧图片无法占满容器该如何解决？

问题原因及解决方案 #

以下是对应问题的排查方向和修复方案：

1. 默认边距影响
   Bootstrap的container-fluid默认自带左右内边距，row默认带有列间距（gutter），子元素col也默认有左右内边距，这些默认边距都会导致图片无法完全贴合视口边缘，出现多余空白。
2. 断点适配问题
   你当前使用的col-lg-6仅在视口宽度≥992px时生效，小于该宽度时两列会变成100%宽度上下排列，也可能出现布局错乱导致的空白。
3. 图片撑满逻辑问题
   img-fluid仅设置最大宽度为100%，如果图片本身原生宽度小于父级列容器的宽度，就不会自动撑满，从而产生空白。

修复后代码示例

/* 原有样式可保留，也可直接用Bootstrap内置类实现不需要额外自定义 */
.container-fluid{
    overflow: hidden;
}

<div class="container-fluid p-0">
    <div class="row g-0">
        <div class="col-6">
            <img src="images/leftHands.png" class="img-fluid w-100" alt="left-hand">
        </div>
        <div class="col-6">
            <img src="images/rightHands.png" class="img-fluid w-100" alt="right-hand">
        </div>
    </div>
</div>

修改说明

• 给container-fluid添加内置类p-0，清除容器默认左右内边距，保证容器完全贴合视口边缘
• 给row添加内置类g-0，清除默认列间距，避免两列之间出现空白
• 将col-lg-6替换为col-6，实现所有视口尺寸下都保持两列等分布局
• 给图片添加内置类w-100，强制图片宽度100%撑满父级容器，避免因图片原生尺寸不足产生留白

如果修改后仍存在空白，可以使用浏览器开发者工具选中右侧列元素和图片元素，查看盒模型参数，即可直接定位空白对应的边距来源。

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