Question

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

Answer 1

使用!important不是一个好选择，因为您很可能希望将来覆盖自己的样式。这给我们带来了CSS优先级。

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

ID为100分
类和伪类的10分
标记选择器和伪元素的1分

在两种选择器样式中，浏览器总是会选择权重更大的选择器。样式表的顺序仅在优先级均匀时才有意义 - 这就是为什么覆盖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;
}

Answer 2

在html的head部分，你的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/

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

Answer 3

它不应该影响加载时间，因为你要覆盖基本样式表的部分。

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

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

Answer 4

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

Answer 5

如果您计划进行任何相当大的更改，最好直接在引导程序中进行更改并重建它。然后，您可以减少加载的数据量。

有关构建指南，请参阅Bootstrap on GitHub。

Answer 6

请参见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";

Answer 7

有点晚了，但我做的是我在根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>

Answer 8

要重置在引导程序中为legend定义的样式，可以在css文件中执行以下操作：

legend {
  all: unset;
}

参考：https://css-tricks.com/almanac/properties/a/all/

CSS中的all属性重置所有选定元素的属性，但Direction和unicode-bidi属性除外控制文字方向。

可能的值为：initial，inherit和unset。

旁注：clear属性与float（https://css-tricks.com/almanac/properties/c/clear/）关联使用

Answer 9

检查控制台上的目标按钮。
转到“元素”标签，然后将鼠标悬停在代码上，并确保找到默认ID 或引导程序使用的类。
使用jQuery / javascript通过调用函数覆盖样式/文本。

请参见以下示例：

geom_point

Answer 10

我发现（bootrap 4）将你的onss css放在bootstrap.css 和.js 后面是最好的解决方案。

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

花了我一些时间才弄清楚这一点。

Answer 11

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

Answer 12

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

}

如何覆盖Bootstrap CSS样式？

12 个答案: