使用Bootstrap 5时页面出现多余空白无法消除，该如何排查解决？

问题原因排查与解决方案 #

你遇到的右侧空白是Bootstrap栅格规则使用不当导致的，和Bootstrap本身的默认规则无关，具体问题和修复方法如下：

核心问题1：row未嵌套在container/container-fluid容器中 #

Bootstrap的row类默认自带左右-0.5rem的负边距，作用是抵消内层col的左右内边距，所有row必须放在container（固定最大宽度）或container-fluid（100%视口宽度）容器内，否则负边距会导致内容横向溢出视口，产生右侧空白。
你代码里有两处row缺失外层容器：

• header里的<div class="row sticky-top">外层只有section.top-bar，没有container类容器包裹
• main里的<div class="hero-image row">外层没有container类容器包裹

核心问题2：多余的container嵌套 #

你在<section class="articles container">内部又嵌套了一层<div class="container gx-4 mt-4">，container本身自带左右内边距，多层嵌套会额外增加不必要的缩进，也可能引发宽度计算异常。

核心问题3：栅格层级不规范 #

Bootstrap栅格的标准层级是container/container-fluid → row → col，你部分代码直接在row下放置未加col类的元素，不符合栅格规则，也可能引发布局偏移。

修复步骤 #

• 给所有无外层容器的row套上container-fluid（需要满宽显示）或container（需要固定最大宽度、左右留白）：
  比如顶部导航修改为：

  <section class="top-bar container-fluid">
    <div class="row sticky-top">
      <img src="images/tux.png" alt="" class="col-2" />
      <h2 class="col-5">About Linux</h2>
      <div class="col-5 hamburger-menu">MENU</div>
    </div>
  </section>
  

  hero区域修改为：

  <div class="container-fluid p-0">
    <div class="hero-image row">
      <div class="hero-text">
        <h1>FOSS</h1>
        <p>And why it's good for you</p>
      </div>
    </div>
  </div>
  

  这里加p-0是为了取消container-fluid默认的左右内边距，让背景图可以铺满全屏。
• 删掉articles container内部嵌套的内层container，直接用外层的container承载内容即可。
• 如果修复后还有残留空白，可以临时添加全局CSS排查溢出元素：

  * { outline: 1px solid rgba(255,0,0,0.3); }
  

  超出视口宽度的元素会被红色轮廓标出，直接对应修改即可。

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