Bootstrap 5.3导航栏在移动端无法铺满页面宽度的问题

问题出在Bootstrap默认的组件样式和容器限制，按下面的修改就能搞定：

核心修改点 #

• 给.navbar-nav设置width: 100%并移除默认内边距，确保列表容器撑满父元素
• 强制.nav-link宽度100%，让每个选项铺满所在列表项
• 可选：如果需要下拉菜单完全撑满屏幕宽度，调整外层.container的移动端padding，或把下拉模块移出容器

修改后的CSS代码 #

#header-nav {
  background-color: rgb(162, 162, 162);
  border-radius: 0;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
}

.navbar-brand a {
  text-decoration: none;
}

.navbar-brand h1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  color: black;
  text-shadow: 1px 1px 1px white;
}

.navbar-brand a:hover,
a:focus {
  text-decoration: none;
}

/* 关键修改：让导航链接铺满宽度 */
.nav-item a {
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  background-color: white;
  width: 100%; /* 新增 */
}

.nav-item a:hover,
a:focus,
a:active {
  color: black;
  background-color: rgb(188, 188, 188);
}

/* 关键修改：让导航列表容器撑满 */
.navbar-nav {
  border-top: 3px solid black;
  width: 100%; /* 新增 */
  padding-left: 0; /* 移除默认内边距 */
}

#chickenNav,
#beefNav {
  border-bottom: 2px solid black;
}

/* 可选：完全去掉移动端左右留白 */
@media (max-width: 576px) {
  #header-nav .container {
    padding-left: 0;
    padding-right: 0;
  }
}

可选：完全撑满屏幕的HTML调整 #

如果要让下拉菜单彻底铺满屏幕宽度，把.collapse模块移出.container，摆脱容器的左右padding限制：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
  <nav id="header-nav" class="navbar">
    <div class="container">
      <div class="navbar-header">
        <div class="navbar-brand">
          <a href="index.html">
            <h1>Food, LLC</h1>
          </a>
        </div>
      </div>
      
      <button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">=</button>
    </div>
    
    <!-- 移出container，避免左右padding限制 -->
    <div class="collapse navbar-collapse" id="collapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a id="chickenNav" class="nav-link" href="#">Chicken</a>
        </li>
        <li class="nav-item">
          <a id="beefNav" class="nav-link" href="#">Beef</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sushi</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

效果说明 #

• 仅修改CSS的方案会让列表项在容器内铺满，保留容器默认的移动端留白
• 调整HTML结构的方案会让下拉菜单完全撑满屏幕宽度，无左右留白

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