Bootstrap 5导航栏无法铺满容器宽度问题求助

你的导航栏宽度被限制，核心原因是Bootstrap 5的.navbar默认宽度为auto，它只会根据内部内容的宽度自适应收缩，不会自动铺满父容器的宽度。而navbar-expand-xx系列类的作用仅仅是控制导航栏在不同屏幕尺寸下是否折叠为汉堡菜单，和导航栏本身的宽度没有关联，所以修改它不会改变导航栏的宽度表现。

要让导航栏铺满外层容器，只需要给<nav>标签添加w-100类（Bootstrap内置的宽度工具类，代表宽度100%），修改后的代码如下：

<div class="container p-3 my-3 bg-primary text-white">

  <h1>Pets to Go <span class="material-icons">pets</span></h1>

  <nav class="navbar navbar-expand-xl w-100">
  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="our_pets.html">Our Pets</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="current_pets.html">Current Pets</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
  </nav> <!-- close navbar -->
  
  </div>  <!-- Close main container -->

添加w-100类后，导航栏就会自动铺满外层.container的宽度了。

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