Bootstrap 5中如何让导航栏链接与图片两侧对齐？

DevOps 小满

2026-7-20

解决方案

要实现导航链接与图片两侧完全对齐，只需调整Bootstrap内置类控制宽度和布局，以下是修改后的完整代码：

<nav class="navbar navbar-light bg-light flex-column align-items-start">
  <!-- 品牌图片 -->
  <a class="navbar-brand" href="#">
    <img src="https://via.placeholder.com/200x80" alt="Logo" class="d-block">
  </a>
  <!-- 导航菜单容器 -->
  <div class="navbar-collapse w-100" id="navbarNav">
    <ul class="navbar-nav w-100">
      <li class="nav-item w-100">
        <a class="nav-link d-block" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item w-100">
        <a class="nav-link d-block" href="#">Features</a>
      </li>
      <li class="nav-item w-100">
        <a class="nav-link d-block" href="#">Pricing</a>
      </li>
      <li class="nav-item w-100">
        <a class="nav-link d-block disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

关键修改说明：

给.navbar添加align-items-start：让内部元素左对齐，避免默认居中布局导致宽度不匹配。
给.navbar-collapse和.navbar-nav添加w-100：强制导航容器和菜单列表宽度与上方图片保持一致（图片宽度由自身尺寸决定，容器会继承其最大宽度）。
给.nav-item和.nav-link分别添加w-100和d-block：让每个导航链接占满整个容器宽度，确保左右边缘与图片完全对齐。
给图片添加d-block：消除图片默认行内元素间距，避免底部出现多余空隙。