Question

我正在尝试更改导航栏上的链接颜色，但在更改后它似乎相同。怎么了？为什么不工作？这是代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">

  <a class="navbar-brand" href="#page-top">
    <span class="d-block d-lg-none">Start Bootstrap</span>
    <span class="d-none d-lg-block">
      <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="">
    </span>
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#experience">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#education">Education</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#skills">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#interests">Interests</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#awards">Awards</a>
      </li>
    </ul>
  </div>

</nav>

CSS

.bg-primary {
  background-color: #BD5D38 !important;
}

,
.nav-link {
  color: #222222 !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
  color: #ffffff;
}

#sideNav .navbar-nav .nav-item .nav-link {
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  #sideNav {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 100vh;
  }
  #sideNav .navbar-brand {
    display: flex;
    margin: auto auto 0;
    padding: 0.5rem;
  }
  #sideNav .navbar-brand .img-profile {
    max-width: 10rem;
    max-height: 10rem;
    border: 0.5rem solid rgba(255, 255, 255, 0.2);
  }
  #sideNav .navbar-collapse {
    display: flex;
    align-items: flex-start;
    flex-grow: 0;
    width: 100%;
    margin-bottom: auto;
  }
  #sideNav .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  #sideNav .navbar-collapse .navbar-nav .nav-item {
    display: block;
  }
  #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
    display: block;
  }
}

我在.nav-link类上更改了它，但它无效。虽然nav-link lass在标签内。我不想使用标签来定义悬停和链接颜色，因为在我的网站上，其他链接将具有其他颜色，而只有导航链接必须具有此颜色。这就是我尝试使用nav-link类的原因。我怎样才能使它工作？提前谢谢！

Answer 1

我认为在你的CSS中关闭.bg-primary之后你有一个不需要的逗号。现在它看起来像：

.bg-primary {
  background-color: #BD5D38 !important; },

删除末尾的逗号，所以它应该是：

.bg-primary {
  background-color: #BD5D38 !important; }

我认为逗号正在搞乱以下几行代码。你的颜色css中的重要因素是阻止悬停，聚焦和活动状态的发挥。

以下是css顶部的外观：

.bg-primary {
  background-color: #BD5D38 !important; }
.nav-link {
  color: #222222;
}
.nav-link:hover, .nav-link:focus, .nav-link:active {color:#ffffff}

此外，如果您要链接到新的测试版bootstrap 4，您需要更加具体并添加.navbar-dark .navbar-nav所以它看起来像：

.bg-primary {
  background-color: #BD5D38 !important; 
}
.navbar-dark .navbar-nav .nav-link {
  color: #222222;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus, 
.navbar-dark .navbar-nav .nav-link:active {
  color:#ffffff
}

导航栏链接的颜色在引导程序中不起作用

1 个答案: