Question

我该如何修改CSS来更改Bootstrap 4中导航栏的颜色？

我该如何解决？这是我的代码，您可以检查

<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="img/logo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
      aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#" style="color: #1fd0b6;">Fiverr Pro</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link"><span><img
                src="https://fiverr-dev-res.cloudinary.com/general_assets/flags/1f1fa-1f1f8.png" style="width: 20px; height: 20px;"></span><span class="p-2">English</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Become a Seller</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sign In</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Join
        </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

您可以检查这是我的CSS

* {
    margin: 0;
    padding: 0;
}
.nav-link {
    font-size: 16px;
    font-weight: 600;
}


.nav-item {
    margin: 2px;

}

是否可以使用引导程序类更改颜色

Answer 1

我猜测它已经设置了颜色，因为其类别为“ navbar-dark”，因此您可以直接更改颜色，但是通常如果已经设置了类别，则必须更改navbar类别才能更改颜色，但您可以使用！important覆盖它（不过不推荐）

.navbar {
  background-color: orange !important;
}

Answer 2

如果我了解您的要求，您希望navbar有颜色吗？

* {
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: 16px;
  font-weight: 600;
}

.nav-item {
  padding: 5px;
  background-color: gray;
  display: inline-block;
  border: 1px solid black;
}

<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="img/logo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#" style="color: #1fd0b6;">Fiverr Pro</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link"><span><img
                src="https://fiverr-dev-res.cloudinary.com/general_assets/flags/1f1fa-1f1f8.png" style="width: 20px; height: 20px;"></span><span class="p-2">English</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Become a Seller</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sign In</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Join
        </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 3

首先，您可能想在这里看看：https://getbootstrap.com/docs/4.4/components/navbar/#color-schemes

在这里，您可以使用navbar-light类而不是navbar-dark类。同样，可以使用bg-primary，bg-success，bg-info，bg-warning，bg-danger，bg-secondary，bg-dark和bg-ligh中的一种代替bg-transparent类。背景颜色。如果要使用其他颜色，则可以在链接到页面的样式文件中定义自己的类，并使用上面的bootstarp类。例如：

.my-bg-color{
   background-color: #123456;
}

.my-navbar-theme .navbar-brand {
  color: # ff0;
}

.my-navbar-theme .navbar-brand: hover, .my-navbar-theme .navbar-brand: focus {
  color: # ff0;
}

.my-navbar-theme .navbar-nav .nav-link {
  color: rgba (255, 255, 0, 0.5);
}

.my-navbar-theme .navbar-nav .nav-link: hover, .my-navbar-theme .navbar-nav .nav-link: focus {
  color: rgba (255, 255, 0, 0.75);
}

.my-navbar-theme .navbar-nav .nav-link.disabled {
  color: rgba (255, 255, 0, 0.25);
}

.my-navbar-theme .navbar-nav .show> .nav-link,
.my-navbar-theme .navbar-nav .active> .nav-link,
.my-navbar-theme .navbar-nav .nav-link.show,
.my-navbar-theme .navbar-nav .nav-link.active {
  color: # ff0;
}

.my-navbar-theme .navbar-toggler {
  color: rgba (255, 255, 0, 0.5);
  border-color: rgba (255, 255, 0, 0.1);
}

.my-navbar-theme .navbar-toggler-icon {
  background-image: url ("data: image / svg + xml,% 3csvg xmlns = 'http: //www.w3.org/2000/svg' width = '30 'height = '30' viewBox = '0 0 30 30 '% 3e% 3cpath stroke =' rgba (255, 255, 0, 0.5) 'stroke-linecap =' round 'stroke-miterlimit = '10' stroke-width = '2' d = 'M4 7h22M4 15h22M4 23h22' / 3c% 3% / 3% SVG ");
}

.my-navbar-theme .navbar-text {
  color: rgba (255, 255, 0, 0.5);
}

.my-navbar-theme .navbar-text a {
  color: # ff0;
}

.my-navbar-theme .navbar-text a: hover, .my-navbar-theme .navbar-text a: focus {
  color: # ff0;
}

然后您可以添加自己的类而不是引导程序类。

<nav class="navbar navbar-expand-lg my-navbar-theme my-bg-color">

如何在引导程序中更改导航颜色

3 个答案: