如何覆盖 Bootstrap CSS 样式？答案

【问题标题】：How can I override Bootstrap CSS styles?如何覆盖 Bootstrap CSS 样式？
【发布时间】：2014-01-10 08:32:53
【问题描述】：

我需要修改bootstrap.css 以适应我的网站。我觉得创建一个单独的custom.css 文件而不是直接修改bootstrap.css 会更好，一个原因是如果bootstrap.css 得到更新，我会尝试重新包含我的所有修改。我会为这些样式牺牲一些加载时间，但对于我要覆盖的少数样式来说，这可以忽略不计。

我如何覆盖bootstrap.css 以便删除锚/类的样式？例如，如果我想删除 legend 的所有样式规则：

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

我可以删除 bootstrap.css 中的所有内容，但如果我对覆盖 CSS 的最佳实践的理解是正确的，我应该怎么做？

明确地说，我想删除所有这些图例样式并使用父级的 CSS 值。那么结合 Pranav 的回答，我会做以下事情吗？

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

（我希望有一种方法可以执行以下操作：）

legend {
  clear: all;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

将您的 custom.css 文件链接为 bootstrap.css 下方的最后一个条目。 Custom.css 样式定义将覆盖 bootstrap.css

HTML

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

复制 custom.css 中图例的所有样式定义并在其中进行更改（如 margin-bottom:5px; -- 这将覆盖 margin-bottom:20px; ）

【讨论】：

是的，我已经这样做了。抱歉，我的问题不清楚。我的问题是问如何在 custom.css 中覆盖 bootstrap.min.css 中的样式。
如果我也使用 bootstrap-theme.min.css 怎么办？
为我工作，即使使用 min css

【解决方案2】：

它不会对加载时间产生太大影响，因为您正在覆盖基本样式表的某些部分。

以下是我个人遵循的一些最佳实践：

始终在基本 CSS 文件之后加载自定义 CSS（不响应）。
尽可能避免使用!important。这可以覆盖基本 CSS 文件中的一些重要样式。
如果您不想丢失媒体查询，请始终在 custom.css 之后加载 bootstrap-responsive.css。 - 必须遵循
希望修改所需的属性（不是全部）。

【讨论】：

既然bootstrap-responsive.css 不再存在，这仍然成立，还是不再相关？

【解决方案3】：

在你的 html 的 head 部分中，将你的 custom.css 放在 bootstrap.css 下面。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

然后在 custom.css 中，您必须对要覆盖的元素使用完全相同的选择器。在 legend 的情况下，它只会在您的 custom.css 中保留 legend，因为引导程序没有任何更具体的选择器。

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

但对于 h1 而言，您必须处理更具体的选择器，例如 .jumbotron h1，因为

h1 {
  line-height: 2;
  color: #f00;
}

不会覆盖

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

这是对 CSS 选择器的特殊性的有用解释，您需要了解它才能准确了解哪些样式规则将应用于元素。 http://css-tricks.com/specifics-on-css-specificity/

其他一切都只是复制/粘贴和编辑样式的问题。

【讨论】：

【解决方案4】：

如果您打算进行任何相当大的更改，最好直接在引导程序本身中进行更改并重新构建它。然后，您可以减少加载的数据量。

有关构建指南，请参阅Bootstrap on GitHub。

【讨论】：

根据所需定制的程度，这可能是最简单的选项。例如，更改任何主题颜色都需要大量覆盖，我宁愿选择模板更改和自定义构建。
@alex Bump 来源和重建？
恕我直言 - 我个人的规则是永远不要修改 CSS、JS 或任何其他库中的源文件 - 在当今世界应该总是有一个优雅的解决方法，否则你会在更新源时遇到问题。

【解决方案5】：

使用!important 不是一个好选择，因为您将来很可能希望覆盖自己的样式。这给我们留下了 CSS 优先级。

基本上，每个选择器都有自己的数字“权重”：

ID 100 分
类和伪类 10 分
标签选择器和伪元素1分
注意：如果元素具有内联样式that automatically wins（1000 分）

在两种选择器样式中，浏览器总是会选择权重更大的一种。样式表的顺序只有在优先级相等时才重要——这就是为什么要覆盖 Bootstrap 并不容易。

您的选择是检查 Bootstrap 源，找出某些特定样式是如何定义的，然后复制该选择器，以便您的元素具有相同的优先级。但是在这个过程中我们有点失去了所有 Bootstrap 的甜头。

解决此问题的最简单方法是将额外的任意 ID 分配给页面上的某个根元素，如下所示：<body id="bootstrap-overrides">

这样，您可以在任何 CSS 选择器前面加上您的 ID，立即为元素添加 100 点权重，并覆盖 Bootstrap 定义：

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

【讨论】：

既然ID只能使用一次，为什么不把#bootstrap-overrides做成一个类呢？
@chharvey：因为你最终不得不计算得更好。如果它是本例中的一个类，它将是 prio 11，如果 css 定义在 bootstrap.css 之后，那么我们就可以开始了。但是，这将非常接近并将其设置为可以大大提高 prio 时间的 id，我们不必担心计算 prio 和测试是否总是正确的。如果你想明确地覆盖默认值，使用 id 更容易。
刚刚度过了我的一天。我知道这一点，但仍然试图弄清楚为什么我的样式没有被解释。
你提到的点（100 代表 id，10 代表类/伪类，1 代表标签选择器/伪元素）是文字，还是你只是为这个例子编造了这些值？
您的解释很好，作为向 css 新手解释它的一种方式是有意义的，但具有误导性。您提到的正确名称是 css specificity，它定义了每个 css 选择器的“权重”。这里有一些关于它的更多细节：css-tricks.com/specifics-on-css-specificity/…

【解决方案6】：

使用 jquery css 代替 css 。 . . jquery 的优先级高于 bootstrap css...

例如

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}

【讨论】：

HTML应该用来提供结构，CSS应该用来提供样式，Javascript（包括jQuery）应该只用来提供交互性。使用 jQuery 覆盖样式与良好架构的原则背道而驰，并且会让任何试图在 6 个月后处理代码的人感到非常困惑。

【解决方案7】：

我发现（引导程序 4）将您自己的 CSS 放在 bootstrap.css 和 .js 后面是最好的解决方案。

找到您要更改的项目（检查元素）并使用完全相同的声明，然后它将覆盖。

我花了一点时间才弄明白。

【讨论】：

【解决方案8】：

有点晚了，但我所做的是向根 div 添加了一个类，然后在我的自定义样式表中扩展了每个引导元素：

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>

【讨论】：

body标签是否存在于div标签中？
@SubratoPatnaik 它不应该。
我们如何覆盖body元素的css？使用 id 而不是类选择器是一种好习惯吗？你能帮我解决这个问题吗？
@SubratoPatnaik 查看此问题的最高答案。以这种方式覆盖 CSS 规则的优先级低于 id。可能是？试试看。

【解决方案9】：

为图例提供 ID 并应用 css。就像将 id hello 添加到 legend() 一样，css 如下所示：

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

【讨论】：

【解决方案10】：

2021 年更新 - Bootstrap 4 和 Bootstrap 5

覆盖 Bootstrap CSS 时要遵循 3 条规则。

在您的 CSS 规则（覆盖）之前导入/包含 bootstrap.css
使用比 Bootstrap CSS 选择器更多（或相等）的 CSS 特定性
如果任何规则被覆盖，请使用 !important 属性来强制执行您的规则。如果您遵循规则 1 和 2，则除非使用 Bootstrap utility classes which often contain !important as explained here，否则这不是必需的

是的，覆盖应该放在单独的styles.css（或custom.css）文件中，以便bootstrap.css 保持不变。这使得升级 Bootstrap 版本更容易，而不会影响覆盖。对styles.css 的引用在bootstrap.css 之后，以便覆盖工作。

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

只需在自定义 CSS 中添加所需的任何更改。例如：

legend {
  display: block;
  width: inherit;
  padding: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: initial;
}

注意：在覆盖 CSS 中是not a good practice to use!important，除非您正在覆盖Bootstrap Utility classes 之一。 CSS specificity 总是适用于一个 CSS 类来覆盖另一个。只需确保您使用的 CSS 选择器与 bootstrap.css 相同或更具体

例如，考虑 Bootstrap 4 深色导航栏链接颜色。这是bootstrap.css...

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}

因此，要覆盖导航栏链接颜色，您可以使用相同的选择器，或者更具体的选择器，例如：

#mynavbar .navbar-nav .nav-link {
    color: #ffcc00;
}

例如：https://codeply.com/p/FyQapHImHg

当 CSS 选择器相同时，最后一个优先，这就是为什么 styles.css 应该跟随 bootstrap.css。

【讨论】：

这似乎没什么新意；几个现有的答案讨论了将您的样式放在一个新的 CSS 文件中，该文件在 Bootstrap CSS 文件之后加载。
#mynavbar 是导航栏的 id :D 对于新手
@Zunair #mynavbar 是navbar 的id，是navbar-nav 的parent

【解决方案11】：

要在引导程序中重置为 legend 定义的样式，您可以在您的 css 文件中执行以下操作：

legend {
  all: unset;
}

参考：https://css-tricks.com/almanac/properties/a/all/

CSS 中的 all 属性重置所有选定元素的属性，但方向和 unicode-bidi 属性除外控制文字方向。

可能的值为：initial、inherit & unset。

旁注：clear 属性与float (https://css-tricks.com/almanac/properties/c/clear/) 相关使用

【讨论】：

【解决方案12】：

检查控制台上的目标按钮。
转到元素选项卡，然后将鼠标悬停在代码上并确保找到默认 ID 或引导程序使用的类。
使用jQuery/javascript调用函数覆盖样式/文本。

看这个例子：

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

【讨论】：

【解决方案13】：

见https://bootstrap.themes.guide/how-to-customize-bootstrap.html

对于简单的 CSS Overrides，您可以在 bootstrap.css 下面添加一个 custom.css

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

对于更广泛的更改，SASS 是推荐的方法。

创建您自己的 custom.scss
custom.scss 更改后导入 Bootstrap

例如，让我们将body背景颜色更改为浅灰色#eeeeee，并将蓝色主要上下文颜色更改为Bootstrap的$purple变量...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

【讨论】：