我需要修改bootstrap.css以适合我的网站。我觉得最好创建一个单独的custom.css文件，而不是直接修改bootstrap.css，一个原因是应该bootstrap.css得到更新，我将遭受尝试重新包括我所有的修改。我将为这些样式牺牲一些加载时间，但对于我覆盖的少数样式来说，这可以忽略不计。
我Hw重写bootstrap.css，以便我删除一个锚/类的风格?例如，如果我想删除图例的所有样式规则:
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的头部部分，将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/
其他一切只是复制/粘贴和编辑样式的问题。
在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/
其他一切只是复制/粘贴和编辑样式的问题。
使用!important不是一个好的选择，因为你很可能想在将来重写你自己的样式。这就留给我们CSS的优先级。
基本上，每个选择器都有自己的数字“权重”:
身份证100分
类和伪类10分
1点标记选择器和伪元素
注意:如果元素具有内联样式，则自动获胜(1000分)
在两种选择器样式中，浏览器总是选择权重更大的那一种。样式表的顺序只在优先级相等时才重要——这就是为什么不容易重写Bootstrap的原因。
您的选择是检查Bootstrap源，找出某些特定样式是如何定义的，并复制该选择器，使元素具有相同的优先级。但我们在这个过程中失去了Bootstrap的甜蜜。
克服这个问题最简单的方法是为页面上的根元素之一分配额外的任意ID，如:<body ID ="bootstrap-overrides">
这样，你可以用你的ID作为任何CSS选择器的前缀，立即为元素添加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;
}
参见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";
有点晚了，但我所做的是，我添加了一个类到根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>
