我已经在网上搜索了一种替代引导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);
}
难道我做错了什么?如果可能的话,我真的很想学习如何以正确的方式进行操作。
最佳答案
您是否尝试过在每条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;
}
通常这不是执行此操作的最佳方法,但我认为它应该有效。
关于css - 故障覆盖自举CSS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12657374/