如何覆盖Bootstrap CSS样式？

html CSS

小小Stafan宝儿

2020-04-03

我需要修改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;
}

第3995篇《如何覆盖Bootstrap CSS样式？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共10个回答

乐 2020.04.03

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

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

我花了一些时间来解决这个问题。

梅 2020.04.03

使用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;

}

卡卡西Near 2020.04.03

给图例提供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;
}

Tony凯 2020.04.03

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

对于简单的CSS覆盖，您可以在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

例如，让我们将主体背景色更改为浅灰色#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";

null 2020.04.03

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

请参考GitHub上的Bootstrap以获得构建指南。

古一 2020.04.03

将您的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;）

Itachi 2020.04.03

因为您要覆盖基本样式表的各个部分，所以它不会对加载时间产生太大影响。

以下是我个人遵循的一些最佳做法：

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

番长 2020.04.03

要重置为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/）相关联

小胖 2020.04.03

在html的头部，将您的custom.css放在bootstrap.css之下。

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

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

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/

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

飞云 2020.04.03

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

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

积分100分
类和伪类10分
1点用于标记选择器和伪元素
注意：如果元素具有自动获胜的内联样式（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;
}

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android