在调整大小时更改引导导航栏颜色答案

【问题标题】：Change bootstrap navbar color back on resize在调整大小时更改引导导航栏颜色
【发布时间】：2021-10-05 14:12:45
【问题描述】：

我正在尝试将导航栏菜单项的背景颜色更改为较小的屏幕尺寸。

在以下情况下会出现问题：

在显示汉堡菜单之前，浏览器窗口会变小
汉堡菜单被点击显示菜单项

（现在我的背景颜色改变了，这是我想要的）

浏览器窗口变大到汉堡菜单消失的程度

现在背景颜色不会变回原来的颜色。这可以通过某种方式解决吗？

下面的代码演示了这个问题：

.navbar-collapse.show,
.navbar-collapse.show .navbar-nav .nav-item .nav-link,
.navbar-collapse.collapsing,
.navbar-collapse.collapsing .navbar-nav .nav-item .nav-link {
  background-color: #000000;
  color: #FFFFFF;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

我尝试通过将属性应用到以下位置来使颜色变回：

.navbar-collapse.collapse,
.navbar-collapse.collapse .navbar-nav .nav-item .nav-link

但这似乎不起作用。

【问题讨论】：

我猜它在某个地方被覆盖了你的代码。如果我使用你最后的 css 代码，我可以看到颜色发生了变化。你能检查它是否被覆盖吗？如果没有，请提供更多代码。我在这段代码中没有看到任何问题。
您使用的是哪个引导程序版本？我不明白你的问题，你要达到什么目标？
添加大屏媒体查询
@Dhara 当我将最后一个代码与 .navbar-collapse 一起使用时，菜单打开后颜色会发生变化。那不是我所追求的。当菜单在小屏幕中打开时，我希望背景为黑色。然后，当窗口变大时，我希望背景恢复到原来的颜色。
@Amalnandan 我正在使用 Bootstrap 4，但问题也出现在 Bootstrap 5 中，如上面的代码所示。我想要实现的是为小屏幕中的菜单项设置不同的颜色。那行得通，但是如果我在打开菜单时使窗口变大，则背景颜色将保持黑色，这不是我想要的。当窗口在菜单打开的情况下变大时，菜单项应该恢复到原来的颜色。

标签： html css twitter-bootstrap navbar bootstrap-5

【解决方案1】：

@media screen and (max-width:600px) {
    .navbar-collapse.show,
    .navbar-collapse.show .navbar-nav .nav-item .nav-link,
    .navbar-collapse.collapsing,
    .navbar-collapse.collapsing .navbar-nav .nav-item .nav-link {
    background-color: #000000;
    color: #FFFFFF;
    }
}

【讨论】：

使用媒体查询设置宽度，您可以更改每个设备的宽度大小
这行得通，谢谢。有没有办法格式化媒体查询，以便它自动与引导断点同步？

【解决方案2】：

您可以简化 CSS 选择器，并将 @media 查询设置为 992px 的 lg 断点...

@media (max-width: 992px) {
    .navbar-collapse,
    .navbar-collapse .navbar-nav .nav-item .nav-link {
        background-color: #000000;
        color: #FFFFFF;
    }
}

https://codeply.com/p/J9TZrAnJCg

【讨论】：

【解决方案3】：

我设法修复它。我删除了我拥有的部分代码并将其替换为：

@include media-breakpoint-down(sm) {
    .navbar-collapse.show,
    .navbar-collapse.show .navbar-nav .nav-item .nav-link,
    .navbar-collapse.collapsing,
    .navbar-collapse.collapsing .navbar-nav .nav-item .nav-link {
        background-color: #000000;
        color:            #FFFFFF;
    }
}

事实证明，你不能只用没有媒体查询的 css 来解决它，因为当你调整窗口大小并且菜单被折叠或展开时，类不会改变。我确实设法将其绑定到引导断点，而无需硬编码大小。

显然这是 scss，而不是 css。在这个主题上我确实有一些功课要做，但至少现在我有一些适合这个项目的东西。

感谢您的帮助！

【讨论】：