twitter-bootstrap 如何更改默认导航栏背景颜色

How to change the default-navbar background color

提问by Fins Up

I used a template from bootstrap for my navbar. I am using the default-navbar class. I was wondering how I can change the background-colorand other properties of this classin the css. Right now when I create a style with the class .navbar-defaultand try to change the background color, it doesn't work. I think I have to create a custom style sheet to overide this? If so, how do I do this, and where would I place the text for the custom style sheet, if that's what I have to do? Here's my code.

我为我的导航栏使用了 bootstrap 的模板。我正在使用默认导航栏类。我想知道如何在 css 中更改background-colorthis 的属性和其他属性class。现在，当我使用类创建样式.navbar-default并尝试更改背景颜色时，它不起作用。我想我必须创建一个自定义样式表来覆盖它？如果是这样，我该怎么做，如果这是我必须做的，我应该在哪里放置自定义样式表的文本？这是我的代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

回答by KalyanLahkar

You can either add a new class like navbar-customand add the class in a custom.css and in custom.css

您可以添加一个新类，例如navbar-custom并在 custom.css 和 custom.css 中添加该类

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

and in your markup write

并在你的标记中写

<nav class="navbar navbar-custom">

or you can do

或者你可以做

<nav class="navbar-default" style="background-color: red">

for example and replace red with whatever color you like

例如，用你喜欢的任何颜色替换红色

回答by Daolagajao

Just add !importantto the background-color.

只需添加!important到background-color.

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

回答by Srajan Chansoriya

If you have access and the editing-authorization to the style sheet (defined as the web address in the CSS code i.e. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css) then only you will be able to change the desired parameters using background-image or background-color...otherwise that might not be possible!

如果您有权访问和编辑样式表（定义为 CSS 代码中的网址，即https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css），则仅您将能够使用 background-image 或 background-color 更改所需的参数……否则可能无法实现！

Further you may also try opening that url address (where your CSS stylesheet has been saved i.e. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssona browser, copying the CSS code to an IDE, editing the desired parameters and linking the css of your website to the newly created (edited) style sheet! This might work.

此外，您还可以尝试打开该 url 地址（您的 CSS 样式表已保存在其中，即https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.csson浏览器，将 CSS 代码复制到IDE，编辑所需的参数并将您网站的 css 链接到新创建（编辑）的样式表！这可能会奏效。

回答by kmg kumar

Rewrite the navbar-headerclass into the following code and put the important in the code

将navbar-header类改写成如下代码，并将重要的放在代码中

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
    background-color: blanchedalmond !important;
}

回答by Jonjie

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