Bootstrap 4移动端导航栏链接区域背景颜色修改问题

要只修改移动端导航栏中链接所在区域的背景为蓝色，你可以通过针对Bootstrap折叠菜单的断点编写自定义CSS来实现，具体步骤如下：

1. 先补全标准的导航栏结构 #

从你给出的代码片段来看，需要确保导航栏包含navbar-collapse容器（这是Bootstrap 4折叠导航的核心结构），完整的基础结构大概是这样：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
  <div class="container">
    <!-- Logo区域 -->
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="index.php"><img src="logo.svg" class="img-fluid logo"/></a>
      </li>
    </ul>
    <!-- 移动端切换按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobileNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 折叠的导航链接容器 -->
    <div class="collapse navbar-collapse" id="mobileNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
        <!-- 更多导航项 -->
      </ul>
    </div>
  </div>
</nav>

2. 添加自定义CSS实现背景色修改 #

因为你用了navbar-expand-lg，导航栏会在屏幕宽度小于992px时折叠（Bootstrap 4的lg断点）。我们只需要在这个断点范围内，修改折叠后导航区域的背景色：

/* 仅针对移动端（屏幕宽度<992px）的折叠导航区域 */
@media (max-width: 991.98px) {
  /* 设置折叠区域的蓝色背景 */
  .navbar-collapse {
    background-color: #007bff; /* 这里用你想要的蓝色，比如Bootstrap原生primary蓝 */
    padding: 1rem; /* 可选：添加内边距让链接区域更美观 */
  }
  /* 可选：调整链接文字颜色，避免和蓝色背景对比度不足 */
  .navbar-collapse .nav-link {
    color: #ffffff !important; /* 用!important覆盖原有navbar-dark的默认文字样式 */
  }
}

关键说明 #

• @media (max-width: 991.98px)：精准匹配navbar-expand-lg的折叠断点（lg的最小触发宽度是992px，小于这个值时导航栏自动折叠），确保样式只作用于移动端。
• .navbar-collapse：这是Bootstrap折叠导航的核心容器，点击移动端切换按钮后展开的就是这个区域，直接给它设置背景色就能精准修改目标区域。
• 链接颜色调整：如果你的蓝色背景和原有文字颜色对比度不够，一定要补充这个样式，保证页面的可读性。

注意点 #

• 确保自定义CSS放在Bootstrap官方CSS文件之后，这样才能正确覆盖默认样式。
• 如果你的导航栏有额外自定义类，记得调整CSS选择器，保证能精准选中目标区域。

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