求助：Bootstrap 4页面右侧出现空白的原因排查

嘿，我来帮你排查下这个问题！结合你的代码和网站情况，Bootstrap 4页面右侧出现空白通常是布局元素溢出视口导致的，下面是具体的原因分析和解决办法：

常见诱因及对应方案 #

1. 未使用Bootstrap的容器类约束布局 #

Bootstrap的核心布局依赖.container或.container-fluid来规范内容的宽度和内边距，如果你直接把<main>放在body下而没有容器包裹，很容易出现横向溢出。

解决办法：
把你的<main>元素嵌套在Bootstrap容器中，比如：

<div class="container-fluid">
  <main id="intro" role="intro" class="inner text-center">
    <h2>Lorum Ipsum</h2>
    <p class="lead">Register now!</p>
    <p class="lead">
      <a href="<?php echo HOME ?>/register" class="btn btn-light btn-lg">Click here</a>
    </p>
  </main>
</div>

或者直接给#intro添加.container-fluid类，它会自动适配视口宽度并处理内边距。

2. 元素宽度+内边距/边框超出视口 #

虽然Bootstrap默认设置了box-sizing: border-box（让元素的内边距和边框包含在宽度内），但如果自定义CSS覆盖了这个属性，或者某个元素的宽度被硬设为超过100vw的值，就会导致横向滚动条和右侧空白。

检查方向：

• 查看是否有元素设置了width: 100%同时加了横向padding/margin，且box-sizing不是border-box
• 检查导航栏、侧边栏这类容易溢出的组件，是否有固定定位的元素宽度超出了视口

临时快速修复（不推荐长期用）：
如果暂时找不到溢出元素，可以给根元素添加横向溢出隐藏：

html, body {
  height: 100%;
  overflow-x: hidden; /* 隐藏横向溢出 */
}

3. 背景图片的罕见情况 #

你的background-size: cover设置本身没问题，但如果背景图片的原始尺寸比例极端，再加上容器的异常定位，偶尔也会触发视觉上的空白（但实际是背景未覆盖到的区域）。不过这个概率很低，优先排查布局元素。

针对你网站的额外提示 #

看了你的站点后，发现大概率是导航栏区域的元素溢出导致的右侧空白，建议检查导航栏的菜单、按钮是否有未正确使用Bootstrap栅格或flex布局的地方，比如某个下拉菜单的宽度超出了视口范围。

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