更改twitter bootstrap 3.0导航栏类背景颜色

Question

in html：

<div class="navbar navbar-default">

在variable.less文件中：

@navbar-default-bg: #f8f8f8;

将此十六进制颜色更改为其他颜色（即蓝色）后，您会注意到只有底边颜色变为蓝色。因为类导航栏也有背景，它会阻止@ navbar-default-bg颜色。

示例：

1.in html：

<div class="navbar navbar-default">

in variable.less：

@ navbar-default-bg：blue;

输出：

2.in html：

<div class="navbar navbar-default">

in variable.less：

@ navbar-default-bg：blue;

在custom.css中：

.navbar {background：blue}

输出：

我知道如果我制作一个自定义的css文件并放置.navbar{background: blue}，它会将导航栏颜色更改为我想要的颜色。

但我更喜欢编辑较少的文件。有没有办法做到这一点？ 在您认为这是一个重复的问题之前先尝试一下！

Answer 1

尝试从项目中删除默认的bootstrap-theme.css和bootstrap-theme.min.css文件，因为我认为它们会覆盖主bootstrap.css文件中的一些样式。

Answer 2

我认为你的问题仍然是重复的。我认为你上面的结论是不对的。 当我设置@ navbar-default-bg：blue;（在variables.less中）并重建css（Bootstrap）。 <div class="navbar navbar-default">会给我一个蓝色的导航栏，如：

.navbar课程不设置背景颜色，也不会影响导航栏默认课程的背景颜色。

目前，您总是需要在.navbar（如navbar-default，navbar-inverse或navbar-custom）类中添加第二个类来设置导航栏的样式。另见：https://github.com/twbs/bootstrap/issues/10332

设置@navbar-default-bg: blue;并重新编译bootstrap后，.navbar-default的css将如下所示：

.navbar-default {
  background-color: #0000ff;
  border-color: #0000de;
}

.navbar-default .navbar-brand {
  color: #777777;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}

.navbar-default .navbar-text {
  color: #777777;
}

.navbar-default .navbar-nav > li > a {
  color: #777777;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
  background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555555;
  background-color: #0000de;
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: #dddddd;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #dddddd;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #cccccc;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #0000de;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555555;
  background-color: #0000de;
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555555;
    background-color: #0000de;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}

.navbar-default .navbar-link {
  color: #777777;
}

.navbar-default .navbar-link:hover {
  color: #333333;
}

注意blue将设置为#0000FF;