Bootstrap 5 置于container内的导航栏宽度与父容器不匹配问题咨询

问题成因 #

• Bootstrap栅格体系里，.container-lg这类容器默认自带左右15px内边距，内部的.row会通过左右各-15px的负外边距抵消父容器的内边距，.col又自带15px的左右内边距，最终保证列内内容和容器边缘有统一的间距。
• 你直接把.navbar放在.container-lg内时，Bootstrap 5的.navbar默认左右内边距为0，导航内容会直接贴在导航栏的左右边缘，和下方列内的内容错位，看起来就像导航栏宽度和父容器不匹配。
• 这种情况本质是没有遵循Bootstrap导航栏的标准用法导致的，官方设计中导航栏内部需要嵌套对应尺寸的容器类，来统一和全站栅格对齐。

修复方案 #

不需要保留自定义的内边距样式，只要在导航栏内部嵌套一个和父容器同规格的.container-lg包裹所有导航内容即可，修改后的导航代码如下：

<nav class="navbar navbar-expand-md navbar-dark bg-dark my-5">
  <!-- 新增嵌套的container-lg -->
  <div class="container-lg">
    <a class="navbar-brand" href="#">xGhost.cz</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Úvod</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Ceník</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Objednávka</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Příručka</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Servery</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Technika</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
      </ul>
    </div>
  </div>
</nav>

修改后可以直接删除style.css中给.navbar手动添加的左右内边距规则，导航栏内容会自动和下方列内容对齐，宽度完全匹配父容器。

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