麻烦重写引导CSS

我已经搜查了净一种方式来覆盖白手起家CSS，但尚未有它为我工作。我试图更改默认navbar颜色，而无需编辑bootstrap.css文件。
我试图把在头下面装bootstrap.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); 
}

这没有工作，所以我试图把它放在自己的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); 
}

上午我做错了什么？如果可能的话，我会很乐意学习如何以正确的方式做到这一点。

来源

2012-09-29 Jeff

除了这个链接下面的答案http://www.nzwhost.com/article/understanding-css-hierarchy可能有帮助 –

这与[在twitter bootstrap 2 0 4中更改导航栏颜色]非常相似（http://stackoverflow.com/questions/11196638/change-navbar-color-in-twitter-bootstrap- 2-0-4），它有一个非常全面的解决方案。 – everette

过载，你需要或者是在后面的代码CSS，或者更具体的，那么你正在尝试的CSS超载。

，这样它指出body .navbar-inner只是使其更具体，也许div.navbar-inner它可能只是在.navbar-inner前面加body，最好是有一个id有什么地方。

如果您选择它作为具体的是在bootstrap.css，那么我认为你的CSS，你认为是不是引导加载后。使用Chromes开发工具或Firefox的萤火虫等工具验证所选内容。

来源

2012-09-29 23:29:22 Krycke

在这种情况下，不需要添加不必要的选择器 –

我只是纠正了一些错误，并尝试添加body，div和一个id，但它仍然不起作用。我还删除了缓存，因为我不知道是否由于某种原因阻止了我看到结果。当我用Chrome检查元素时，它说它仍在使用bootstrap.css，但是当我取消选中所有值时，它会显示我的样式表中的颜色。我的代码中放置了bootstrap.css之后的样式表。 – Jeff

'bootstrap.css'用于元素的选择器是什么？ – Krycke

。在你的CSS一个错字：

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

我觉得应该是：

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

如果您键入CSS一个错误，它停止解释的休息，所以不占优您。

来源

2012-09-29 23:29:42 Mark

太棒了。我不知道它在一次错误后停止渲染。可以肯定的是，这一次我把它从bootstrap.css复制到我自己的样式表中，并更改了颜色值。遗憾的是仍然没有运气 – Jeff

刚用了大半天试图改变导航栏的颜色：[

我认为这个问题是.navbar逆

你独立.css文件应该包括这样的事，则颜色会改变：

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

来源

2013-03-16 06:12:28

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

来源

2013-08-18 15:44:51 actraub

我们还应该补充说，在更改较少的文件后，必须重新编译css（或由lessjs解释） – Mangiucugna

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

事情是这样的：

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

通常不是最好的方式做到这一点，但我认为它应该工作。

来源

2013-08-18 16:02:51 MitulP91

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

我知道它的带动下，但看起来ATLEAST它的工作原理

例子：

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

来源

2018-02-15 10:44:10 Dxg125

麻烦重写引导CSS

回答

相关问题