在不改变导航栏的情况下填充 header 的顶部（用颜色）

Question

我前几天在这里问了一个问题：

与 bootstrap 导航相关 header，查理出色地回答了这一问题。他帮助我收紧了一些与 header 和导航相关的代码。这是他的作品 fiddle:

代码效果很好，但我想用相同的颜色 BG #30302f 填充 header 的其余部分，以消除 bootstrap [=32= 中标准的灰色]，同时仍然保持 header 的定位。

有没有想过用哪个元素填充容器的其余部分 space 用那种颜色遮罩？

CSS 这里：

.container {
    background:#30302f;
}

.container a{
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.container a:hover{
    text-decoration: underline;
    color: #ffffff;
}


.menuIcon {
    background:rgb(200,200,200);
}

.navbar-brand {
    height:auto;
}

#brandImage {
    max-width:60%;
}

@media (max-width:600px) {

    .navbar-brand {
    width:95%;
    padding:8px 2.5%;
    }

    #brandImage {
    max-width:100%;
    }
}

@media (min-width:990px) and (max-width:1200px) {
    .navbar-brand {
    width:250px;
    }
}

旁注：我的文字颜色仍然是灰色而不是白色，悬停装饰也没有改变。 bootstrap 是否也覆盖了它？

再次感谢！

Answer 1

你只需要设置navbar-default的颜色：

.navbar-default {
  background-color: #30302f;
}

对于字体颜色，使用这个：

.navbar-default .navbar-nav>li>a {
  color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  color: red;
}

示例 fiddle：https://jsfiddle.net/8yufLL4n/3/

在不改变导航栏的情况下填充 header 的顶部（用颜色）

Filling the top of a header (with color) without altering the navigation bar

html

css

twitter-bootstrap

twitter-bootstrap-3