无法覆盖 Bootstrap CSS答案

【问题标题】：Trouble Overriding Bootstrap CSS无法覆盖 Bootstrap CSS
【发布时间】：2012-09-29 23:23:31
【问题描述】：

我已经在网上搜索了一种覆盖引导 CSS 的方法，但还没有为我工作。我正在尝试更改默认的 navbar 颜色而不编辑 bootstrap.css 文件。
加载bootstrap.css后，我尝试将以下内容放在头上：

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

这不起作用，所以我尝试将它放在它自己的 CSS 文件中，然后像这样加载该样式表：

bootstrapOverload.css

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

_Layout.cshtml

<link rel="stylesheet" href="Content/bootstrap.css">
<link rel="stylesheet" href="Content/bootstrapOverload.css">

当这不起作用时，我尝试向元素添加自定义类

_Layout.cshtml

<div class="navbar-inner navbar-override"> <!-- added navbar-override -->

bootstrapOverload.css

.navbar-override {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0);
}

我做错了吗？如果可能的话，我真的很想学习如何以正确的方式做到这一点。

【问题讨论】：

除了下面这个链接nzwhost.com/article/understanding-css-hierarchy的答案可能会有所帮助
这个和change navbar color in twitter bootstrap 2 0 4很像，有一个非常全面的解决方案。

标签： css twitter-bootstrap

【解决方案1】：

您是否尝试在每个 CSS 行上添加 !important 标记以告知元素覆盖引导程序？

类似这样的：

.navbar-override {
    background-color: #006633 !important;
    background-image: -moz-linear-gradient(top, #006633, #006633) !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)) !important;
    background-image: -webkit-linear-gradient(top, #006633, #006633) !important;
    background-image: -o-linear-gradient(top, #006633, #006633) !important;
    background-image: linear-gradient(to bottom, #006633, #006633) !important;
    border-color: #006633 !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0) !important;
}

通常不是最好的方法，但我认为它应该有效。

【讨论】：

完美！这就是我一直在寻找的。span>

【解决方案2】：

要重载 css，您需要在代码的后面，或者比您尝试重载的 css 更具体。

可以在.navbar-inner 前面添加body 以便它声明body .navbar-inner 以便更具体，或者可能是div.navbar-inner，最好是在某处有一个id .

如果您选择它与 bootstrap.css 中的一样具体，那么我认为您的 css 不会像您想的那样在引导之后加载。使用 Chromes 开发工具或 Firefox 的 firebug 等工具验证选择的内容。

【讨论】：

在这种情况下，不需要添加不必要的选择器
我刚刚更正了一些错误并尝试添加 body、div 和 id，但它仍然不起作用。我还删除了我的缓存，因为我不知道这是否会因为某种原因阻止我看到结果。当我用 Chrome 检查元素时，它说它仍在使用 bootstrap.css 但是当我取消选中所有值时，它会显示我的样式表中的颜色。我在代码中将样式表放在 bootstrap.css 之后。
bootstrap.css 为您的元素使用什么选择器？

【解决方案3】：

您的 CSS 中有错字：

background-image: -mox-linear-gradient(top, #006633, #006633);

我认为应该是：

background-image: -moz-linear-gradient(top, #006633, #006633);

如果您在 CSS 中输入错误，它会停止解释其余部分，因此不会为您覆盖。

【讨论】：

太棒了。我不知道它在一次错误后停止渲染。为了确保这次我做对了，我将 css 从 bootstrap.css 复制到我自己的样式表中并更改了颜色值。不幸的是，仍然没有运气。

【解决方案4】：

刚刚花了大部分时间尝试更改导航栏颜色：[

我认为问题出在 .navbar-inverse

您单独的 .css 文件应该包含类似这样的内容，然后颜色会改变：

.navbar-inverse .navbar-inner {
background-color: #586214;
background-image: none;
}

【讨论】：

【解决方案5】：

您可以通过更改 LESS 变量来覆盖引导默认值。

https://getbootstrap.com/2.0.1/less.html#variables

//导航栏

@navbarBackground:@Color1;
@navbarBackgroundHighlight：@Color1；
@navbarBrandColor: #FFFFFF;
@navbarLinkColor: #FFFFFF;
@navbarLinkColorHover: #FFFFFF;
@navbarLinkColorActive：#FFFFFF；
@navbarInverseBackground: #FFFFFF;
@navbarInverseBackgroundHighlight：#FFFFFF；
@navbarInverseBorder: #FFFFFF;
@navbarInverseLinkColorHover:@Color7;
@navbarInverseLinkColorActive:@Color11;
@navbarInverseLinkColor:@Color1;

【讨论】：

我们还应该补充一点，在更改less文件后，css必须重新编译（或由lessjs解释）

【解决方案6】：

通过复制 CSS-Class 并重命名它来解决您的问题。然后使用这个类:)

我知道它的 Boosted，但至少它可以工作

例子：

.drop-down {...}     /* is from bootstrap */
.drop-down-new {...} /* Your new Class that works*/

【讨论】：