Bootstrap网站右侧空白无法消除，求全屏适配解决方案

以下是针对你遇到的页面右侧空白、无法全屏适配问题的排查和解决步骤：

1. 检查容器结构的基础配置 #

• 把页面最外层容器换成Bootstrap的container-fluid，别用container——container自带固定宽度和左右内边距，container-fluid才是全屏宽度的容器：

  <div class="container-fluid">
    <!-- 你的页面内容 -->
  </div>
  

• 排查自定义CSS里有没有给容器、行或列加固定宽度或者超出父元素的margin/padding，比如下面这种错误写法会直接导致溢出，得移除或改成相对宽度（比如width: 100%）：

  /* 错误示例，直接删掉或调整 */
  .custom-container {
    width: 105%;
    margin-right: -20px;
  }
  

2. 修正栅格系统的嵌套错误 #

• 严格遵循Bootstrap栅格的层级：container/container-fluid → row → col-*，别跳过层级，比如正确结构是这样：

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <!-- 内容模块 -->
      </div>
    </div>
  </div>
  

• 别给col-*元素加额外的margin-left/margin-right，栅格列本身已经自带内边距（padding），额外margin会让行溢出视口。可以用Bootstrap内置的px-0/mx-0类快速清除多余边距。

3. 处理全局溢出与媒体元素 #

• 先给<html>和<body>加个临时修复，同时找根源：

  html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  

• 给页面里的图片、视频加宽度限制，避免超出父容器：

  img, video {
    max-width: 100%;
    height: auto;
  }
  

4. 用开发者工具定位溢出元素 #

• 按F12打开浏览器开发者工具，用元素选择器逐个点页面元素，看哪个元素的宽度超出了视口。查看元素的「计算样式」，找width或margin导致的溢出。
• 重点检查自定义组件（比如导航栏、横幅），看有没有硬编码的宽度值，或者用position: absolute时没设置right: 0。

内容的提问来源于stack exchange，提问作者Enes Salih Gökçek