如何使用Bootstrap为导航栏设置30%宽度的背景色？

先修正原代码的问题 #

你当前的代码存在几个影响功能的问题：

• 引入的是Bootstrap 5的CSS，但使用了Bootstrap 3的废弃类（navbar-static-top、navbar-toggle），这些类在Bootstrap 5中已被移除，会导致样式失效
• 标签嵌套错误：button标签内部包含了collapse的div，不符合HTML规范
• 存在多余的闭合标签（</li>、</ul>）

解决方案 #

情况1：导航栏整体宽度为父容器的30%

如果需要让整个导航栏的宽度占父容器的30%，同时设置背景色，可以这样修改：

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

<!-- 引入Bootstrap 5的JS，用于折叠功能 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<nav class="navbar bg-white w-30 mx-auto" id="navcolor">
  <!-- 移动端折叠按钮 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <img src="./Images/Exitimg.png" alt="Exit png">
  </button>

  <!-- 导航内容 -->
  <div class="collapse navbar-collapse" id="navbarContent">
    <ul class="navbar-nav me-auto">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <img src="./Images/searchicon.png" alt="Search image">
        </a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Reach</a></li>
    </ul>
  </div>
</nav>

<style>
/* Bootstrap 5没有内置w-30类，自定义宽度类 */
.w-30 {
  width: 30% !important;
}
</style>

说明：

• 用Bootstrap 5的navbar、navbar-toggler等标准类替代旧类
• 自定义w-30类实现30%宽度（Bootstrap只提供10%-100%间隔10的预设宽度类）
• mx-auto可以让导航栏水平居中，不需要的话可直接移除

情况2：导航栏宽度100%，但背景色只占30%宽度

如果需要导航栏整体占满父容器宽度，但背景色只覆盖左侧/右侧30%的区域，可以通过伪元素实现：

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<nav class="navbar position-relative" id="navcolor">
  <!-- 移动端折叠按钮 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <img src="./Images/Exitimg.png" alt="Exit png">
  </button>

  <!-- 导航内容 -->
  <div class="collapse navbar-collapse" id="navbarContent">
    <ul class="navbar-nav me-auto">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <img src="./Images/searchicon.png" alt="Search image">
        </a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Reach</a></li>
    </ul>
  </div>
</nav>

<style>
#navcolor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: #fff; /* 替换成你需要的背景色 */
  z-index: -1; /* 让背景层在导航内容下方，不遮挡元素 */
}
</style>

说明：

• 给导航栏设置position-relative，让伪元素可以相对其定位
• 用::before伪元素创建30%宽度的背景层，z-index: -1确保不会遮挡导航内容
• 如果需要背景在右侧，把left: 0改成right: 0即可

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