Bootstrap 5导航栏能否与网格系统对齐？如何实现示例需求

实现方案（完全基于Bootstrap 5原生类，无需自定义CSS） #

问题根源

你当前代码不对齐的核心原因是：

• 导航栏包裹层用的是.container，有固定最大宽度、自带左右1.5rem内边距
• 下方内容区包裹层用的是.container-fluid，是全屏宽度，和.container的宽度规则完全不匹配

修改步骤

1. 将内容区的container-fluid替换为和导航一致的container，保证两者的宽度、左右内边距完全统一
2. 修正代码里写错的偏移类：Bootstrap 5的列偏移类是offset-*，你第一行里的col-offset-2是旧版写法，替换为offset-2
3. 导航栏里的float-end可删除，Bootstrap 5导航默认用flex布局，替换为ms-auto即可实现菜单右对齐，更符合框架原生规范

完整可运行代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container ">
    <a class="navbar-brand" href="#">
      <img data="data-inject-svg" src="https://via.placeholder.com/50" alt="logo">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row reflections">
    <div class="col-6">
      wide text
    </div>
    <div class="col-4 offset-2">
      <div class="text">
        text
      </div>
    </div>
  </div>
  <div class="row reflections">
    <div class="col-4 offset-2">
      text
    </div>
    <div class="col-6">
      wide text
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

效果说明

修改后导航栏的左右内容边界，会和下方网格列的左右边缘完全对齐，符合你要求的效果，所有改动都在Bootstrap原生提供的类规则范围内，没有额外自定义样式。

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