Bootstrap 5导航栏两侧出现小间隙 左侧空间未占满如何修复

问题根因 #

你遇到的左侧空隙和body边距无关，是Bootstrap 5 navbar组件的默认样式导致：

• navbar本身默认带有padding-left: 1rem的内边距
• 如果导航栏内部嵌套了.container/.container-fluid等容器类，这类容器默认也带有padding-left: 1.5rem的内边距

修复方案 #

优先用Bootstrap内置的工具类修改，无需额外写自定义CSS：

• 若导航栏内部未嵌套container容器，直接给nav标签加ps-0工具类即可取消左内边距：

<nav class="navbar navbar-expand-lg bg-body-tertiary ps-0">
  <!-- 导航栏内部内容 -->
</nav>

• 若导航栏内部嵌套了container容器，给内部的container加ps-0工具类即可：

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid ps-0">
    <!-- 导航栏内部内容 -->
  </div>
</nav>

如果工具类未生效，可添加自定义CSS强制覆盖：

/* 清除导航栏本身的左内边距 */
.navbar {
  padding-left: 0 !important;
}
/* 清除内部容器的左内边距 */
.navbar .container,
.navbar .container-fluid {
  padding-left: 0 !important;
}

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