时间戳

首页 > 解决方案 > 在调整大小时更改引导导航栏颜色

html - 在调整大小时更改引导导航栏颜色

问题描述

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

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

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

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

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

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

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

.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

但这似乎不起作用。

标签： htmlcsstwitter-bootstrapnavbarbootstrap-5

解决方案

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

@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。在这个主题上我确实有一些功课要做，但至少现在我有一些适用于这个项目的东西。

谢谢你的帮助！

推荐阅读