麻烦覆盖Bootstrap CSS

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

您是否尝试!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;
}

通常不是最好的方法,但我认为它应该工作.

Answer 2

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

也许可以body在前面添加.navbar-inner，这样它就body .navbar-inner可以更具体地说明，或者div.navbar-inner最好是在某个地方有一个 id。

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