在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/

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

这应该不会对加载时间造成太大影响，因为您覆盖了基本样式表的部分内容。

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

总是在基本CSS文件之后加载自定义CSS(没有响应)。 尽可能避免使用!important。这可以覆盖基本CSS文件中的一些重要样式。 如果你不想丢失媒体查询，总是在custom.css之后加载bootstrap-responsive.css。-必须遵循 更喜欢修改所需的属性(不是全部)。

使用jquery css而不是css…Jquery有优先级比bootstrap css…

e.g

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


);

 instead of

.mnu
{

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

}

给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;
}

链接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;)

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

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

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