使用Bootstrap栅格系统时右侧出现异常边距的问题排查

核心问题成因 #

你遇到的右侧间隙，主要来自两个容易忽略的Bootstrap默认规则：

1. .container的固定最大宽度限制
   Bootstrap的.container类在不同断点下有预设的max-width值（比如lg断点下是1140px），你只清除了它的margin和padding，但没有取消这个max-width限制。当屏幕宽度大于这个预设值时，.container会被限制在固定宽度内，无法撑满整个屏幕，自然右侧会出现空隙。

2. 栅格系统的负边距平衡机制被破坏
   Bootstrap原生的.row带有margin-left: -15px和margin-right: -15px，用来抵消.container默认的左右padding；而.col-*类的左右padding是用来形成列之间的 gutter（间距）。你把这三个类的margin和padding全设为0后，原本的宽度平衡被打破，也可能导致列的对齐出现偏差。

解决方案 #

要实现真正的全屏两列无间隙布局，你可以这么改：

1. 替换.container为.container-fluid
.container-fluid默认是100%宽度，没有max-width限制，天生就是为全屏布局设计的，比自己修改.container更稳妥。
2. 精准清除不必要的内边距/边距，保留栅格核心逻辑（可选，如果你不需要列间距）
   如果不需要列之间的空隙，可以只清除.col-lg-6的padding，而保留.row的负边距（或者把.row的margin也设为0，同时确保.container-fluid没有padding）。

示例代码：

<div class='container-fluid'>
  <div class='row' style="margin: 0;">
    <div class='col-lg-6' style="padding: 0; border: 1px solid red;">
      <img src='image.jpg' width='100%'> <!-- 建议用100%宽度让图片填满列 -->
    </div>
    <div class='col-lg-6' style="padding: 0; border: 1px solid red;">
      <img src='image.jpg' width='100%'>
    </div>
  </div>
</div>

另外，建议给图片设width: 100%而不是固定200px，这样图片会自适应列的宽度，避免出现图片和列边缘之间的空隙。

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