无法覆盖 Bootstrap CSS

Trouble Overriding Bootstrap CSS

提问by Bacon

I have searched the net for a way to override bootstraps CSS but have yet to have it work for me. I am trying to change the default navbarcolor without editing the bootstrap.cssfile.
I have tried putting the following in the head after loading bootstrap.css:

我已经在网上搜索了一种覆盖引导 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);
}

This did not work so I tried putting it in its own CSS file and then loading that stylesheet like so:

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

bootstrapOverload.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

_Layout.cshtml

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

When that didn't work I tried adding a custom class to element

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

_Layout.cshtml

_Layout.cshtml

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

bootstrapOverload.css

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

Am I doing something wrong? I would really love to learn how to do this the right way if possible.

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

回答by MitulP91

Have you tried adding the !importanttag on each CSS line in order to tell the element to override bootstrap?

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

Something like this:

像这样的东西：

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

Typically not the best way to do this, but I think it should work.

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

回答by Krycke

To overload css you need to either be later in the code, or more specific then the css you are trying to overload.

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

It may be possible to just add bodyin front of .navbar-innerso that it states body .navbar-innerjust so that it is more specific, or maybe div.navbar-inner, the best would be to have an id there somewhere.

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

If you are selecting it as specific as is in the bootstrap.css, then I think you css is not loaded after the bootstrap as you think. Verify what is selected with a tool like Chromes development tool or Firefox's firebug.

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

回答by Mark

There is a typo in your CSS:

您的 CSS 中有一个错字：

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

I think it should be:

我觉得应该是：

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

If you type a mistake in CSS, its stop interpreting the rest, so no override for you.

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

回答by Willy Nilley

Just spent most of the day trying to change the navbar color : [

一天中的大部分时间都在尝试更改导航栏颜色：[

I think the problem is .navbar-inverse

我认为问题是 .navbar-inverse

Your separate .css file should include something like this then the color will change:

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

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

回答by actraub

you can override the bootstrap defaults by changing the LESS variables.

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

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

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

//Navbar

//导航栏

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

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

回答by Dxg125

Solve your Problem by Copying the CSS-Class and rename it. Then use this class :)

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

I know its Boosted but look atleast it works

我知道它的 Boosted 但至少看起来它有效

Example:

例子：

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