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" >