HTML導航菜單背景色

Question

我正在編輯Bootstrap模板，並且嘗試更改頂部導航菜單的顏色。

我在這里有這段代碼：

 <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#"><img src="https://home.channeliser.com/Content/WebContent/images/logo1.png" alt="Channeliser" height="40" width="100"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">How it works</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> </ul> </div> </div> </nav> 

我嘗試在CSS文件中使用navbarr類名稱來更改背景，但是它不起作用。 任何幫助將不勝感激。

Answer 1

.navbar {
    background-color: red;
}

如果沒有看到頁面的所有CSS，就不可能知道它是否可以工作，但是如果沒有其他CSS，它應該可以完成工作。

Answer 2

在Bootstrap 4上為我工作

通過刪除bg-light類並添加您自己的類來解決

例

您的代碼：

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

</nav>

改成 ：

<nav class="navbar navbar-expand-lg navbar-light your-bg-navbar fixed-top">
   //navbar item
</nav>

刪除bg-light並添加自己的CSS

添加CSS：

.your-bg-navbar {
    background-color: rgba(35,35,35,0);
}

rgba用於透明顏色，您可以更改固體

背景顏色：紅色或#rgbcolor

希望這項工作對您有所幫助。

Answer 3

這是因為.bg-light的背景色帶有!important因此它將覆蓋您嘗試的所有內容，除非您還使用!important ：

.navbar {
background: red !important;
}

Answer 4

從經驗來看，除了在屬性末尾添加！important標記外，bootstrap css都將優於自定義css。 因此，您的問題的答案是

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

或者，您可以添加一個自定義css文件，用您自己的自定義類替換bg-light類。