bootstrap 导航栏颜色不变

Question

我希望这个 bootstrap 导航栏背景颜色清晰，没有任何背景颜色。

 <nav class="navbar navbar-expand-lg navbar-light bg-light" > <div class="collapse navbar-collapse" id="navbarSupportedContent" style="font-family: 'Noto Sans JP', sans-serif;"> <ul class="nav nav-pills justify-content-end ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Designs </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item" style="border: 1px solid #0F0436;"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav>

我试过这个 css 但它不起作用，我也试过它！important 因为 bootstrap 有它自己的 css 但同样的事情：/

 .navbar .navbar-expand-lg .navbar-light .bg-light { position: fixed; top: 0px; transition: 0.5s; text-align: center; overflow: hidden; }

有什么帮助吗？

Answer 1

您不需要编写任何 css。 为此使用 Bootstraps bg-transparent类。

在你的 HTML 中用bg-transparent替换bg-light

当前的

<nav class="navbar navbar-expand-lg navbar-light bg-light" >

新的

<nav class="navbar navbar-expand-lg navbar-light bg-transparent">

Answer 2

我看到您的导航栏具有bg-light类。 此类为导航栏提供白色。 要使导航栏透明，您必须添加bg-transparent作为类。 或者你可以只清除 bg-light 的类。
你的代码——

 <nav class="navbar navbar-expand-lg navbar-light bg-light" >

将其更改为（如果要使其透明）-

 <nav class="navbar navbar-expand-lg navbar-light bg-transparent" >