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

Posted

技术标签:

【中文标题】我想更改 Bootstrap 导航栏的背景颜色。 [复制]【英文标题】:I want to change the background-color of my Bootstrap navigation bar. [duplicate] 【发布时间】: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>

【问题讨论】:

【参考方案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,只需从 &lt;nav&gt; 元素中删除 bg-light 类,您就可以在没有 !important 的情况下更改它的颜色。

【讨论】:

【参考方案3】:

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

.bg-light2background-color:red a.bg-light2:focus,a.bg-light2:hover,button.bg-light2:focus,button.bg-light2:hoverbackground-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>

【讨论】:

以上是关于我想更改 Bootstrap 导航栏的背景颜色。 [复制]的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 4 导航栏颜色

Twitter Bootstrap 中的导航栏颜色

我不知道我在做啥错,我想在页面滚动时更改导航栏的背景颜色

使用 webpack 更改 react-bootstrap 导航栏的文本颜色

Bootstrap IE 背景颜色问题

如何更改导航栏的默认背景颜色? [复制]