css - 无法覆盖 Bootstrap CSS

Question

我在网上搜索了一种覆盖引导 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 文件中，然后像这样加载该样式表：

引导重载.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 -->

引导重载.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);
}

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

score 10 · Accepted Answer

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

像这样的东西：

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

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

score 3 · Accepted Answer

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

我认为问题是 .navbar-inverse

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

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

score 3 · Accepted Answer

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

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

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

score 3 · Accepted Answer

您的 CSS 中有一个错字：

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

我认为应该是：

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

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

score 1 · Accepted Answer

您可以通过更改 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；

score 0 · Accepted Answer

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

我知道它的提升，但至少看看它的工作原理

例子：

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

css - 无法覆盖 Bootstrap CSS

6 回答 6

Related

Reference