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

For simple CSS Overrides, you can add a custom.css below the bootstrap.css <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> For more extensive changes, SASS is the recommended method. create your own custom.scss import Bootstrap after the changes in custom.scss For example, let’s change the body background-color to light-gray #eeeeee, and change the blue primary contextual color to Bootstrap's $purple variable... /* 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";

在html的头部部分，将custom.css放在bootstrap.css下面。

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

然后在custom.css中，你必须对你想覆盖的元素使用完全相同的选择器。在legend的情况下，它只是在custom.css中保持legend，因为bootstrap没有任何更具体的选择器。

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/

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

对于ruby on rails用户——

在应用程序CSS文件中，确保首先提到引导文件，然后是自定义CSS样式表。这样，您编写的后一个CSS代码就会覆盖前一个CSS代码。如果需要，也使用!important

 *= require 'bootstrap.min'
 *= require_self
 *= require 'name_of_your_stylesheet'

我发现(bootstrap 4)把你自己的CSS放在bootstrap. CSS和.js后面是最好的解决方案。

找到您想要更改的项(inspect element)并使用完全相同的声明，然后它将被覆盖。

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

更新2021 -引导4和引导5

有3条规则来遵循当覆盖引导CSS..

import/include bootstrap.css在你的CSS规则之前(覆盖) 使用比Bootstrap CSS选择器更多的CSS专一性(或相等) 如果任何规则被重写，请使用!important属性强制执行规则。如果你遵循规则1和规则2，这应该是不必要的，除非使用Bootstrap实用程序类，这些类通常包含!important，就像这里解释的那样

是的，重写应该放在一个单独的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中使用!important不是一个好的实践，除非 您正在重写一个引导实用程序 类。CSS 特异性 一个CSS类覆盖另一个CSS类总是有效的。只要确保你使用的CSS选择器和bootstrap.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文件中执行以下操作:

legend {
  all: unset;
}

裁判:https://css-tricks.com/almanac/properties/a/all/

CSS中的all属性重置所有所选元素的属性 属性，除了方向和unicode属性 控制文本方向。

可能的值有:initial, inherit & unset。

附注:clear属性用于float (https://css-tricks.com/almanac/properties/c/clear/)