在调整大小时将引导程序导航栏颜色更改回

Question

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

在以下场景中会出现问题：

1. 浏览器窗口变小，直到显示汉堡菜单
2. 单击汉堡菜单以显示菜单项

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

3. 浏览器窗口变大，直到汉堡菜单消失

现在背景颜色不会变回原来的颜色。 这可以以某种方式修复吗？

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

 .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

但这似乎不起作用。

Answer 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;
    }
}

Answer 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