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;
}
#1 楼
使用!important并不是一个好的选择，因为将来您很可能会希望覆盖自己的样式。这给我们留下了CSS优先事项。 基本上，每个选择器都有其自己的数字“权重”：
ID为100分
类和伪类为10分
标签选择器和伪元素的1分
注意：如果元素具有自动赢得的内联样式（1000分）
在两种选择器样式浏览器中，浏览器将始终选择具有更多样式的样式重量。样式表的顺序仅在优先级均匀时才重要-这就是为什么覆盖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;
}
#2 楼
在html的头部，将您的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/
其他一切都只是复制/粘贴和编辑样式的问题。
#3 楼
由于您要覆盖基础样式表的各个部分，因此加载时间不会受到太大影响。以下是我个人遵循的一些最佳做法：
始终加载自定义基本CSS文件后的CSS（无响应）。
尽可能避免使用
!important。这样可以覆盖基本CSS文件中的一些重要样式。如果您不想丢失媒体查询，请始终在custom.css之后加载bootstrap-sensitive.css。 -必须遵循
优先修改必需的属性（并非全部）。
评论
由于bootstrap-sensitive.css不再存在，这是否仍然成立，或者不再相关？
–肖恩·威尔逊（Shaun Wilson）
17年1月31日，0：38
#4 楼
将您的custom.css文件链接为bootstrap.css下面的最后一个条目。 Custom.css样式定义将覆盖bootstrap.cssHTML
<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中的样式。
– Alex
2013年12月21日在16:59
如果我还使用bootstrap-theme.min.css怎么办？
– Quasaur
15年8月20日在1:32
即使最小的CSS也能为我工作
–mimi
19年7月12日在6:18
#5 楼
要重置引导程序中为legend定义的样式，可以在css文件中执行以下操作：legend {
all: unset;
}
参考：https://css-tricks.com/almanac/ properties / a / all /
CSS中的all属性重置所有选定元素的
属性，方向和unicode-bidi属性除外，这些属性控制文本
可能的值为：
initial，inherit和unset。注意：
clear属性与float（https：// css- ricks.com/almanac/properties/c/clear/）#6 楼
有点晚了，但我要做的是我在根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标签中？
– Subrato Patnaik
11月3日，11：11
@SubratoPatnaik它不应该。
–mr5
11月4日7:02
如何覆盖body元素的CSS？最好使用id代替类选择器？你能帮我吗？
– Subrato Patnaik
11月4日7:20
@SubratoPatnaik Iook是这个问题的最高答案。以这种方式覆盖CSS规则的优先级比id低。也许？试试看。
–mr5
11月4日7:41
#7 楼
如果您打算进行任何较大的更改，那么最好直接在引导程序中进行更改并重新构建它们。然后，您可以减少加载的数据量。请参考GitHub上的Bootstrap以获得构建指南。
评论
根据所需定制的程度，这可能是最简单的选择。例如，更改任何主题颜色将需要大量替代，因此我宁愿选择模板更改和自定义构建。
–大卫·柯克兰（David Kirkland）
2014-09-18 14:55
@alex碰撞源并重建？
– VictorHäggqvist
15年10月29日在16:07
恕我直言-我的个人原则是，永远不要修改CSS，JS或任何其他lib中的源文件-在当今世界，应该总是有一个优雅的解决方法，否则您在更新源代码时会遇到麻烦。
– G-Man
8月18日14:55
#8 楼
请参阅https://bootstrap.themes.guide/how-to-customize-bootstrap.html对于简单的CSS覆盖，您可以在以下位置添加custom.css bootstrap.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，例如，让我们将主体背景色更改为浅灰色#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";
#9 楼
我发现（引导程序4）将自己的CSS放在bootstrap.css和.js后面是最好的解决方案。找到要更改的项目（检查元素）并使用完全相同的声明，然后它将覆盖。
我花了一些时间才弄清楚。
#10 楼
2020年更新-Bootstrap 4，Bootstrap 5 beta覆盖Bootstrap CSS时要遵循3条规则。
在CSS规则（覆盖）之前导入/包含
bootstrap.css 添加更多特定于CSS选择器的特异性（或相等）
，如果任何规则被覆盖，请使用！important属性强制您的规则。如果遵循规则1和2，则除了使用通常包含！important的Bootstrap实用程序类时，这没有必要，如此处所述
是的，应将替代项放在单独的
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不是一个好习惯，除非您覆盖了一个Bootstrap Utility
类。 CSS
特异性
始终适用于一个CSS类来覆盖另一个CSS类。只需确保使用与bootstrap.css相同或更特定的CSS选择器即可。例如，考虑使用Bootstrap 4黑色Navbar链接颜色。这是
bootstrap.css ... .navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
因此，要覆盖Navbar链接颜色，可以使用相同的选择器，或使用更特定的选择器，例如：
#mynavbar .navbar-nav .nav-link {
color: #ffcc00;
}
CSS选择器相同，最后一个优先级高，这就是为什么
styles.css应该紧随bootstrap.css的原因。评论
这似乎并没有说什么新鲜的东西。现有的几个答案都讨论了将样式放入一个新的CSS文件中，该文件在Bootstrap CSS文件之后加载。
– TylerH
18年8月28日在2:26
#11 楼
检查控制台上的目标按钮。
转到元素选项卡，然后将鼠标悬停在代码上，并确保找到引导程序使用的默认ID
或类。
使用jQuery / javascript通过调用函数覆盖样式/文本。
请参见以下示例：
$(document).ready(function(){
$(".dropdown-toggle").css({
"color": "#212529",
"background-color": "#ffc107",
"border-color": "#ffc107"
});
$(".multiselect-selected-text").text('Select Tags');
});
#12 楼
给图例提供ID并应用CSS。就像向legend（）添加id hello一样，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;
}
#13 楼
使用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覆盖样式与良好架构的原则背道而驰，并且对于六个月后尝试使用该代码的任何人都将造成极大的困惑。
–史蒂芬·史密斯（Stephen R. Smith）
17年7月15日在21:44
评论
由于ID只能使用一次，所以为什么不让＃bootstrap-overrides类呢？
–chharvey
15年8月19日在3:07
@chharvey：因为您最终不得不进行更好的计算。如果在此示例中为类，则它将为prio 11，并且如果css定义位于bootstrap.css之后，那么我们将很好。但是，这非常接近，并将其设置为ID，可以大大增加prio的使用时间，我们不必担心计算prio并进行艰苦的测试（是否总是正确）。如果您想明确地覆盖默认值，则使用id更容易。
– hogan
2015年9月11日下午6:15
刚刚度过了我的一天。我知道这一点，但仍然想弄清楚为什么我的样式无法解释。
– hogan
2015年9月11日下午6:17
是您提到的要点（id为100，类/伪类为10，标记选择器/伪元素为1）是文字，还是您在本例中只是将这些值加起来？
–凯尔·瓦塞拉（Kyle Vassella）
17年7月20日在19:17
您的解释很好，它可以作为向css新手解释的一种方式，但会产生误导。您提到的正确名称是CSS特异性，它定义了每个CSS选择器的“权重”。以下是有关它的更多详细信息：css-tricks.com/specifics-on-css-specificity/…
–阿德里亚诺
18-10-16在6:11