Bootstrap 5折叠时navbar-nav铺满全屏的实现求助

我正在使用Bootstrap 5开发网站，当前导航栏的切换按钮功能正常，但我希望导航栏折叠时，navbar-nav能够铺满整个屏幕宽度。尝试了一些调整但未能达成效果，附上代码和当前效果截图：

现有代码 #

CSS代码 #

/***** Top menu *****/

.navbar {
  background: #000;
  transition: all .6s;
  backface-visibility: hidden;
  height: 88px;
}

.navbar.navbar-no-bg {
  background: rgba(0, 0, 0);
}

.navbar-dark .navbar-nav {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  color: rgba(255, 255, 255, 1);
  border: 0;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link:focus {
  color: #fff;
  outline: 0;
}


.navbar-brand {
  width: 136px;
  background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
  border: 0;
  margin-left: 60px;
  text-indent: -99999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.navbar-nav {
  background: rgba(0, 0, 0);
  padding-top: 24px;
  margin-right: 70px;
  padding-bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

</head>
<body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">
        <div class="container">
          <a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
          <button class="navbar-toggler"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#top-content">About Us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#services">Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#about-us">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link scroll-link" href="#portfolio">FAQ</a>
              </li>
              <li class="nav-item">
                <button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>      
</body>
</html>

要实现折叠时navbar-nav铺满屏幕宽度，需调整两处关键设置：

• 移除navbar-nav的右侧外边距：原CSS中.navbar-nav的margin-right:70px会限制宽度，直接删除该属性即可。
• 针对折叠状态调整宽度：通过媒体查询，在屏幕宽度小于Bootstrap 5的lg断点（992px）时，强制navbar-nav占满100%宽度，并清除多余边距。

修改后的CSS代码如下：

/***** Top menu *****/

.navbar {
  background: #000;
  transition: all .6s;
  backface-visibility: hidden;
  height: 88px;
}

.navbar.navbar-no-bg {
  background: rgba(0, 0, 0);
}

.navbar-dark .navbar-nav {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  color: rgba(255, 255, 255, 1);
  border: 0;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link:focus {
  color: #fff;
  outline: 0;
}


.navbar-brand {
  width: 136px;
  background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
  border: 0;
  margin-left: 60px;
  text-indent: -99999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.navbar-nav {
  background: rgba(0, 0, 0);
  padding-top: 24px;
  /* 移除限制宽度的右侧外边距 */
  padding-bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
}

/* 针对折叠状态（屏幕宽度小于992px）的样式调整 */
@media (max-width: 991.98px) {
  .navbar-nav {
    width: 100%;
    margin: 0;
  }
  /* 可选：让每个导航项也铺满宽度，优化点击区域 */
  .navbar-nav .nav-item {
    width: 100%;
  }
}

HTML中的navbar-nav保留ms-auto类，不影响大屏状态下的靠右对齐效果，小屏折叠时会被媒体查询样式覆盖。调整后，导航栏折叠时navbar-nav即可铺满整个屏幕宽度。

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