更改引导导航栏背景颜色和字体颜色答案

【问题标题】：Change bootstrap navbar background color and font color [closed]更改引导导航栏背景颜色和字体颜色
【发布时间】：2014-07-30 10:06:05
【问题描述】：

我想在引导程序navbar 中更改背景和文本颜色，但它没有按预期更改...这是我的自定义 CSS：

.navbar-default .navbar-fnt {
    color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
    color: #CC3333;
}

以及相关的HTML：

<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
    <div class="navbar-header">
        <div class="collapse navbar-collapse">
              ul and li
        </div>
    </div>
</div>

我不明白为什么这不会改变背景和文本颜色 - 谁能帮忙？

【问题讨论】：

您是否尝试过使用 Web Developer 工具检查目标元素？它显示了哪些应用的 CSS 样式？
确保您的自定义样式表正确链接。示例：maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/…>
重复stackoverflow.com/questions/18529274/…
来源：getbootstrap.com/components/#navbar跨度>

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我已经使用以下 CSS 成功地设置了我的 Bootstrap 导航栏的样式。此外，您没有在 CSS 中定义任何字体，所以这就是字体没有改变的原因。可以找到使用此 CSS 的站点here。

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #000; /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
        a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: white; /*BACKGROUND color for active*/
    background-color: #030033;
}

.navbar-default {
    background-color: #0f006f;
    border-color: #030033;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #66CCFF; /*change color of links in drop down here*/
}

.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: silver; /*Change rollover cell color here*/
}

.navbar-default .navbar-nav > li > a {
    color: white; /*Change active text color here*/
}

【讨论】：

这是一个非常糟糕的方法。你将陷入 CSS 地狱，风格混乱。如果您使用的是原始 CSS，请在下载引导程序之前更改变量。如果您使用 LESS 或 SCSS，只需更改 $navbar-default-bg: red; 的一个变量
这让我发疯了很长一段时间，我意识到某处有一个 theme.less ( 将 background-image 设置为优先于 background-color 的线性渐变跨度>

【解决方案2】：

您的 CSS 中不需要特定的 .navbar-default。背景颜色需要background-color:#cc333333（或只是background:#cc3333）。最后，最好将所有自定义合并到一个类中，如下所示：

.navbar-custom {
    color: #FFFFFF;
    background-color: #CC3333;
}

<div id="menu" class="navbar navbar-default navbar-custom">

示例：http://www.bootply.com/OusJAAvFqR#

【讨论】：

以后如何在div中使用？
我更新了答案以显示顶级 html
出于某种原因，它仅将背景颜色更新为红色。没有将字体设置为白色。
你有 ul 或 li 样式吗？您可以在 bootply 或 jsfiddle 中重新创建问题吗？
让我改述一下.. 你必须有一些更多的样式下线，或者在某个地方有一些更强的特异性（在这种情况下你需要你的特异性，我在我的回答中删除了）

【解决方案3】：

这些类很可能已经由 Bootstrap 定义，请确保您想要覆盖这些类的 CSS 文件在 Bootstrap CSS 之后调用。

<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->

否则，您可以将 !important 放在 CSS 的末尾，如下所示：color:#ffffff!important;，但我建议不惜一切代价不要使用 !important。

【讨论】：