我想更改 Bootstrap 导航栏的背景颜色。 [复制]答案

【问题标题】：I want to change the background-color of my Bootstrap navigation bar. [duplicate]我想更改 Bootstrap 导航栏的背景颜色。 [复制]
【发布时间】：2019-04-28 14:33:56
【问题描述】：

我想更改引导导航栏的背景颜色。

目前是这样的。

我使用的 html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Complete Bootstrap 4 Website Layout</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	<link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link disabled" href="#">Team</a>
      <a class="nav-item nav-link disabled" href="#">Connect</a>
    </div>
  </div>
</nav>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

删除bg-light 类并将您想要的任何颜色设置为navbar 类。请注意，bg-light 的值中有 !important，这意味着它将覆盖不重要的属性。您可以将内联样式与 ~important 一起使用，它也可以解决问题，但不是一个好习惯。

.navbar{
  background-color: #bada55 !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Complete Bootstrap 4 Website Layout</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	<link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link disabled" href="#">Team</a>
      <a class="nav-item nav-link disabled" href="#">Connect</a>
    </div>
  </div>
</nav>

【讨论】：

【解决方案2】：

您的导航栏背景颜色在!important 规则下：

.bg-light {
    background-color: #f8f9fa!important;
}

您可以尝试使用另一个 !important css 规则覆盖该值，但 css 路径更长。这样，您的 !important 规则将优先于第一个 !important 规则。

类似：

.navbar.bg-light {
    background-color: {your-desired-color} !important;
}

附：我不会说这是一个不好的做法，但是如果您不确定为什么要使用它，应该避免使用 !important 规则。因此，如果您可以编辑 HTML，只需从 <nav> 元素中删除 bg-light 类，您就可以在没有 !important 的情况下更改它的颜色。

【讨论】：

【解决方案3】：

你改变bg-lightbg-light2并写下你想要的颜色。

.bg-light2{background-color:red }a.bg-light2:focus,a.bg-light2:hover,button.bg-light2:focus,button.bg-light2:hover{background-color:#dae0e5}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Complete Bootstrap 4 Website Layout</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	<link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light2">
  <a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link disabled" href="#">Team</a>
      <a class="nav-item nav-link disabled" href="#">Connect</a>
    </div>
  </div>
</nav>

【讨论】：