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

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”，所以你可以直接更改颜色，但是通常如果已经设置了一个类，你将必须更改导航栏类来更改颜色，但是你可以用 !important 覆盖它（但不推荐）.navbar&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;orange&nbsp;!important; }

Answer 2

首先，您可能想看看这里：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{&nbsp; &nbsp;background-color: #123456;}.my-navbar-theme .navbar-brand {&nbsp; color: # ff0;}.my-navbar-theme .navbar-brand: hover, .my-navbar-theme .navbar-brand: focus {&nbsp; color: # ff0;}.my-navbar-theme .navbar-nav .nav-link {&nbsp; color: rgba (255, 255, 0, 0.5);}.my-navbar-theme .navbar-nav .nav-link: hover, .my-navbar-theme .navbar-nav .nav-link: focus {&nbsp; color: rgba (255, 255, 0, 0.75);}.my-navbar-theme .navbar-nav .nav-link.disabled {&nbsp; 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 {&nbsp; color: # ff0;}.my-navbar-theme .navbar-toggler {&nbsp; color: rgba (255, 255, 0, 0.5);&nbsp; border-color: rgba (255, 255, 0, 0.1);}.my-navbar-theme .navbar-toggler-icon {&nbsp; 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 {&nbsp; color: rgba (255, 255, 0, 0.5);}.my-navbar-theme .navbar-text a {&nbsp; color: # ff0;}.my-navbar-theme .navbar-text a: hover, .my-navbar-theme .navbar-text a: focus {&nbsp; color: # ff0;}然后，您可以添加自己的类而不是引导类。<nav class="navbar navbar-expand-lg my-navbar-theme my-bg-color">

Answer 3

如果我理解你的要求，你想要navbar有颜色吗？* {&nbsp; margin: 0;&nbsp; padding: 0;}.nav-link {&nbsp; font-size: 16px;&nbsp; font-weight: 600;}.nav-item {&nbsp; padding: 5px;&nbsp; background-color: gray;&nbsp; display: inline-block;&nbsp; border: 1px solid black;}<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">&nbsp; <div class="container">&nbsp; &nbsp; <a class="navbar-brand" href="#"><img src="img/logo.png"></a>&nbsp; &nbsp; <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">&nbsp; &nbsp; &nbsp; <span class="navbar-toggler-icon"></span>&nbsp; &nbsp; </button>&nbsp; &nbsp; <div class="collapse navbar-collapse" id="navbarTogglerDemo02">&nbsp; &nbsp; &nbsp; <ul class="navbar-nav ml-auto">&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="#" style="color: #1fd0b6;">Fiverr Pro</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="nav-link"><span><img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">Become a Seller</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">Sign In</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Join&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; </div></nav>