覆盖 Bootstrap CSS时出现问题

hjzp0vay 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(7)|浏览(131)

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

型

_布局.cshtml

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

型
当这不起作用时，我尝试向元素添加一个自定义类

_布局.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);
}

型
我做错了什么吗？如果可能的话，我真的很想学习如何正确地做这件事。

twitter-bootstrap

来源：https://stackoverflow.com/questions/12657374/trouble-overriding-bootstrap-css

7条答案

按热度按时间

3pmvbmvn1#

你有没有试过在每一行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;
}

字符串
通常不是最好的方法，但我认为它应该工作。

赞(0）回复(0）举报 2023-11-15

rkkpypqq2#

要重载css，你需要在代码的后面，或者更具体地说，然后你试图重载的css。
可以在.navbar-inner前面加上body，这样它就可以声明body .navbar-inner，这样它就更具体了，或者div.navbar-inner，最好是在某处有一个id。
如果你在bootstrap.css中选择的是特定的，那么我认为你的css并没有像你想象的那样在 Bootstrap 之后加载。使用Chrome开发工具或Firefox的firebug等工具验证所选择的内容。

赞(0）回复(0）举报 2023-11-15

wj8zmpe13#

您的CSS中有一个错字：

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

字符串
我觉得应该是：

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

型
如果你在CSS中输入了一个错误，它会停止解释其余的，所以你没有覆盖。

赞(0）回复(0）举报 2023-11-15

nx7onnlm4#

只是花了一天的大部分时间试图改变导航栏的颜色：[
我认为问题在于. navbar-inverse
您的单独的.css文件应该包括这样的东西，然后颜色会改变：

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

字符串

赞(0）回复(0）举报 2023-11-15

vvppvyoh5#

您可以通过更改LESS变量来覆盖 Bootstrap 的默认值。
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;

赞(0）回复(0）举报 2023-11-15

q3qa4bjr6#

解决你的问题的方法是修改CSS类并重命名它。然后使用这个类：）
我知道它的助推器，但至少它的工作
范例：

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

字符串

赞(0）回复(0）举报 2023-11-15

xkftehaa7#

首先尝试添加引导脚本头部分，然后添加自己的css文件。

赞(0）回复(0）举报 2023-11-15

我来回答

覆盖 Bootstrap CSS时出现问题

7条答案

相关问题

热门标签

最新问答