使用Bootstrap时页面右侧仍有留白且出现水平滚动条该如何解决？

你遇到的水平滚动条问题核心是违背了Bootstrap栅格系统的默认适配逻辑，具体原因和解决方案如下：

问题根因 #

• Bootstrap的container/container-fluid 默认自带左右15px内边距，作用是抵消内部.row 元素默认的左右-15px负外边距，再配合.col 自带的左右15px内边距，三者共同保证内容不会超出视窗宽度。你手动将container-fluid的左右padding强制设为0后，没有内边距抵消row的负外边距，row的总宽度就会比视窗宽出30px，自然出现水平溢出和滚动条。
• 额外问题：你给.col元素手动设置了150px固定宽度，不符合Bootstrap栅格列的自适应设计逻辑，小屏设备下也可能额外加剧溢出问题。

解决方案 #

方案1（推荐，符合Bootstrap设计规范，无兼容隐患） #

不要全局覆盖原生container-fluid的默认样式，改用自定义类实现无内边距需求，同时适配row的负外边距：

1. 替换你写的全局container-fluid覆盖样式为以下自定义样式：

/* 自定义无内边距的容器类，不影响全局默认容器 */
.container-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
/* 抵消该容器下row的默认负外边距 */
.container-no-padding > .row {
  margin-left: 0;
  margin-right: 0;
}

2. 把HTML中对应容器的类名改为container-fluid container-no-padding即可。
3. 移除给.col设置的固定宽度width:150px，如果需要固定宽的列，可改用col-auto让列自适应内容宽度，或提前自定义对应尺寸的宽度工具类使用。

方案2（快速兜底方案） #

如果暂时不需要严格遵循栅格规范，可直接在全局CSS中给body添加横向溢出隐藏：

body {
  overflow-x: hidden;
}

该方案可以直接消除水平滚动条，但属于治标不治本的处理方式，建议优先使用方案1从根源解决问题。

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