大视口下出现水平滚动条，如何修复Bootstrap自定义full-width类问题

问题根源 #

你遇到的水平滚动条问题是full-width类的常见实现缺陷：Bootstrap默认.container类自带左右各15px内边距，常规的full-width实现会用负左右边距抵消父级内边距，若同时给该类设置了width: 100vw，元素总宽度会变成100vw + 30px，超出视口宽度就会触发横向滚动条。

修复方案 #

方案一（通用最优解） #

直接替换你现有的full-width类CSS代码：

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  /* 可选配置：需要内容和原container宽度对齐时添加 */
  padding-left: calc((100vw - 100%) / 2);
  padding-right: calc((100vw - 100%) / 2);
}

该实现不依赖父级container的padding参数，不会产生额外宽度溢出，适配所有Bootstrap容器场景。

方案二（快速热修复） #

如果不想改动现有full-width类逻辑，直接给页面根标签添加配置即可：

html, body {
  overflow-x: hidden;
}

该配置会直接截断横向溢出内容，从根源阻止水平滚动条出现。

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