更改 Bootstrap Yeti 主题的导航栏颜色答案

【问题标题】：Changing Navbar color for Bootstrap Yeti theme更改 Bootstrap Yeti 主题的导航栏颜色
【发布时间】：2014-04-08 08:34:53
【问题描述】：

我刚开始使用 Bootstrap 第 3 版，我正在尝试为 VS 2013 中的 ASP Web 应用程序更改 Bootstrap Yeti 主题 http://bootswatch.com/yeti/ 的默认导航栏颜色。我下载了 bootstrap.css 和 @ 987654325@ 文件并将它们复制到我的项目中。

我想将导航栏背景颜色更改为green: 93c951，将导航栏文本更改为blue: 0f74bc.

我已按照Change navbar color in Twitter Bootstrap 3 此处的说明获取正确答案，但当我更改.navbar-default 颜色设置以及其他导航栏设置更改时，导航栏颜色保持不变。我对创建 Visual Studio Web 窗体应用程序时创建的 Content 文件夹下的 bootstrap.css 文件进行了更改。

我需要做些什么来进行这些更改？

Site.Master

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Ecoline</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

嗯，可能是原始引导样式覆盖了您的自定义样式。尝试替换/删除您从 Bootstrap 下载的样式 - 或使用 !important，如果必须的话。

.navbar-default {
    background-color: #93c951 !important;
    border-color: #222222;
}


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


// Also don't forget to change the hover styles as well

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: blue;
    background-color: #93c951 !important;
}   


// And the brand colour

.navbar-default .navbar-brand {
    color: blue;
}

【讨论】：

感谢您的回复。我已经按照您对 bootstrap.css 的建议完成了。不用找了。我需要为 min.css 做同样的事情吗？
如果您有主引导程序，则不需要 min.css，请尝试摆脱它。
仍然没有变化。通过 css 检查是否需要进行其他更改。
能否请您在 doctpye 声明下方发布您的 html 的头部部分。可能与订购有关。
呵呵，你不要像<link rel="stylesheet" href=""> 那样导入你的样式表，好吧。你是否使用任何其他 css 文件？