Bootstrap的container类在内容溢出视口时自动修改左右边距如何解决

问题根因 #

你遇到的边距跳变是浏览器垂直滚动条占位导致的正常现象：

• 页面内容高度小于视口时，浏览器默认不显示垂直滚动条，此时视口可用宽度为浏览器窗口完整宽度，Bootstrap的container类基于该宽度计算左右边距。
• 页面内容超出视口后，垂直滚动条出现，会占用10~15px的视口宽度，可用宽度缩小后container的响应式计算逻辑会自动调整边距，就会出现跨页面布局偏移的观感。

修复方案 #

方案1：全局强制显示垂直滚动条（兼容性最好） #

直接在全局公共样式中添加如下代码，不管页面长短始终预留滚动条位置，彻底消除宽度差：

html {
  overflow-y: scroll;
}

方案2：滚动条悬浮不占位（适合仅兼容现代浏览器场景） #

如果不想始终显示滚动条不符合你的设计需求，可以用现代浏览器支持的overlay模式，滚动条悬浮在内容上层，不占用视口宽度：

html {
  overflow-y: overlay;
}

该方案不兼容IE及旧版Edge浏览器。

方案3：固定容器边距 #

如果不想调整滚动条行为的话，也可以将container替换为container-fluid，自行设置固定的左右内边距，不依赖响应式自动计算，示例代码如下：

.custom-container {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

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