Question

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

Overriding Bootsrap with custom CSS related to search forms

与引导导航标题相关，查理出色地回答了这个问题。他帮我收紧了一些与我的标题和导航相关的代码。这是他的工作小提琴：

代码很有用，但我想用相同颜色的BG＃30302f填充标题的其余部分，以消除引导CSS中标准的灰色，同时仍保持标头的定位。 / p>

有关填充容器其余部分的元素的任何想法都会掩盖该颜色的空间吗？

这里有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;
    }
}

旁注：我的文字颜色仍然是灰色而不是白色，悬停装饰也不会改变。引导程序是否也会覆盖它？

再次感谢！

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;
}

示例小提琴：https://jsfiddle.net/8yufLL4n/3/

填充标题顶部（带颜色）而不更改导航栏

1 个答案: