Question

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

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

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

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

Answer 2

CSS中有拼写错误：

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

我认为应该是：

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

如果您在CSS中输入错误，则会停止解释其余内容，因此不会覆盖您。

Answer 3

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

我认为问题是.navbar-inverse

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

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

Answer 4

要使css超载，您需要在代码中稍后，或者更具体的是您尝试重载的css。

可以在body前面添加.navbar-inner，以便它body .navbar-inner只是为了使其更具体，或者div.navbar-inner，最好会在那里有一个id。

如果你选择的是bootstrap.css中的特定内容，那么我认为你没有像你想的那样在引导程序之后加载css。使用Chromes开发工具或Firefox的firebug等工具验证选择的内容。

Answer 5

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

http://bootstrap.lesscss.ru/less.html

//导航栏

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

Answer 6

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

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

示例：

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

麻烦覆盖Bootstrap CSS

6 个答案: