堆栈内存溢出
  简体   繁体   English

如何覆盖 Bootstrap CSS 样式？

[英]How can I override Bootstrap CSS styles?

 原文  2013-12-21 16:47:27  3   14    html/ css/ twitter-bootstrap

问题描述

I need to modify bootstrap.css to fit my website.我需要修改bootstrap.css以适应我的网站。 I feel it's better to create a separate custom.css file instead of modifying bootstrap.css directly, one reason being that should bootstrap.css get an update, I'll suffer trying to re-include all my modifications.我觉得创建一个单独的custom.css文件而不是直接修改bootstrap.css更好，一个原因是如果bootstrap.css得到更新，我会尝试重新包含我的所有修改。 I'll sacrifice some load time for these styles, but it's negligible for the few styles I'm overriding.我会为这些样式牺牲一些加载时间，但对于我要覆盖的少数样式来说，这可以忽略不计。

Hw do I override bootstrap.css so that I remove the style of an anchor/class?如何覆盖bootstrap.css以便删除锚/类的样式？ For example, if I want to remove all the styling rules for legend :例如，如果我想删除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;
}

I can just delete all that in bootstrap.css , but if my understanding about best practices on overriding CSS is correct, what should I do instead?我可以删除bootstrap.css中的所有内容，但是如果我对覆盖 CSS 的最佳实践的理解是正确的，我应该怎么做呢？

To be clear, I want to remove all those styles of legend and use parent's CSS values.需要明确的是，我想删除所有这些图例样式并使用父级的 CSS 值。 So combining Pranav's answer, will I be doing the following?所以结合 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;
}

(I was hoping there's a way to do something like the following:) （我希望有一种方法可以执行以下操作：）

legend {
  clear: all;
}

14 个解决方案

解决方案1
 578  2014-12-30 11:13:41

Using !important is not a good option, as you will most likely want to override your own styles in the future.使用!important不是一个好的选择，因为您将来很可能想要覆盖自己的样式。 That leaves us with CSS priorities.这给我们留下了 CSS 优先级。

Basically, every selector has its own numerical 'weight':基本上，每个选择器都有自己的数字“权重”：

  • 100 points for IDs身份证100分
  • 10 points for classes and pseudo-classes类和伪类 10 分
  • 1 point for tag selectors and pseudo-elements标签选择器和伪元素 1 分
  • Note: If the element has inline styling that automatically wins (1000 points)注意：如果元素具有自动获胜的内联样式（1000 分）

Among two selector styles browser will always choose the one with more weight.在两种选择器样式中，浏览器将始终选择权重较大的一种。 Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.只有当优先级相等时，样式表的顺序才重要——这就是为什么要覆盖 Bootstrap 并不容易。

Your option is to inspect Bootstrap sources, find out how exactly some specific style is defined, and copy that selector so your element has equal priority.您的选择是检查 Bootstrap 源，找出某些特定样式是如何定义的，然后复制该选择器，以便您的元素具有相同的优先级。 But we kinda loose all Bootstrap sweetness in the process.但是我们在这个过程中有点失去了所有 Bootstrap 的甜头。

The easiest way to overcome this is to assign additional arbitrary ID to one of the root elements on your page, like this: <body id="bootstrap-overrides">解决这个问题的最简单方法是为页面上的根元素之一分配额外的任意 ID，如下所示： <body id="bootstrap-overrides">

This way, you can just prefix any CSS selector with your ID, instantly adding 100 points of weight to the element, and overriding Bootstrap definitions:这样，您可以在任何 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
 111  2013-12-21 17:04:30

In the head section of your html place your custom.css below bootstrap.css.在您的 html 的 head 部分中，将您的 custom.css 放在 bootstrap.css 下方。

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

Then in custom.css you have to use the exact same selector for the element you want to override.然后在 custom.css 中，您必须对要覆盖的元素使用完全相同的选择器。 In the case of legend it just stays legend in your custom.css because bootstrap hasn't got any selectors more specific.在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;
}

But in case of h1 for example you have to take care of the more specific selectors like .jumbotron h1 because但是例如在h1的情况下，您必须处理更具体的选择器，例如.jumbotron h1因为

h1 {
  line-height: 2;
  color: #f00;
}

will not override不会覆盖

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Here is a helpfull explantion of specificity of css selectors which you need to understand to know exactly which style rules will apply to an element.这是对 css 选择器的特殊性的有用解释，您需要了解它才能准确了解哪些样式规则将应用于元素。 http://css-tricks.com/specifics-on-css-specificity/ http://css-tricks.com/specifics-on-css-specificity/

Everything else is just a matter of copy/paste and edit styles.其他一切都只是复制/粘贴和编辑样式的问题。

解决方案3
 30  2013-12-21 16:54:36

It should not effect the load time much since you are overriding parts of the base stylesheet.它不应该对加载时间产生太大影响，因为您正在覆盖基本样式表的某些部分。

Here are some best practices I personally follow:以下是我个人遵循的一些最佳实践：

  1. Always load custom CSS after the base CSS file (not responsive).始终在基本 CSS 文件之后加载自定义 CSS（不响应）。
  2. Avoid using !important if possible.尽可能避免使用!important 。 That can override some important styles from the base CSS files.这可以覆盖基本 CSS 文件中的一些重要样式。
  3. Always load bootstrap-responsive.css after custom.css if you don't want to lose media queries.如果您不想丢失媒体查询，请始终在 custom.css 之后加载 bootstrap-responsive.css。 - MUST FOLLOW - 必须遵循
  4. Prefer modifying required properties (not all).更喜欢修改所需的属性（不是全部）。

解决方案4
 27  2013-12-21 16:50:28

Link your custom.css file as the last entry below the bootstrap.css.将您的 custom.css 文件链接为 bootstrap.css 下方的最后一个条目。 Custom.css style definitions will override bootstrap.css Custom.css 样式定义将覆盖 bootstrap.css

Html html

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

Copy all style definitions of legend in custom.css and make changes in it (like margin-bottom:5px; -- This will overrider margin-bottom:20px; )复制 custom.css 中图例的所有样式定义并在其中进行更改（例如 margin-bottom:5px; -- 这将覆盖 margin-bottom:20px; ）

解决方案5
 10  2018-08-28 02:15:45

Update 2021 - Bootstrap 4 and Bootstrap 5 2021 年更新 - Bootstrap 4 和 Bootstrap 5

There are 3 rules to follow when overriding Bootstrap CSS..覆盖 Bootstrap CSS 时需要遵循 3 条规则。

  1. import/include bootstrap.css before your CSS rules (overrides)在您的 CSS 规则（覆盖）之前导入/包含bootstrap.css
  2. use more CSS Specificity (or equal) than the Bootstrap CSS selectors使用比 Bootstrap CSS 选择器更多的 CSS 特定性（或相等）
  3. if any rule is overridden, use !important attribute to force your rules.如果任何规则被覆盖，请使用 !important 属性来强制执行您的规则。 If you follow rules 1 & 2 this shouldn't be necessary except for when using Bootstrap utility classes which often contain !important as explained here如果您遵循规则 1 和 2，则这不是必需的，除非使用通常包含 !important 的 Bootstrap 实用程序类，如此处所述

Yes, overrides should be put in a separate styles.css (or custom.css ) file so that the bootstrap.css remains unmodified.是的，覆盖应该放在单独的styles.css （或custom.css ）文件中，以便bootstrap.css保持不变。 This makes it easier to upgrade the Bootstrap version without impacting the overrides.这使得升级 Bootstrap 版本更容易，而不会影响覆盖。 The reference to the styles.css follows after the bootstrap.css for the overrides to work.在bootstrap.css之后引用styles.css以使覆盖生效。

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

Just add whatever changes are needed in the custom CSS.只需在自定义 CSS 中添加所需的任何更改。 For example:例如：

legend {
  display: block;
  width: inherit;
  padding: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: initial;
}

Note: It's not a good practice to use !important in the override CSS, unless you're overriding one of the Bootstrap Utility classes .注意：在覆盖 CSS中使用!important 不是一个好习惯，除非您要覆盖Bootstrap Utility 类之一。CSS specificity always works for one CSS class to override another.CSS 特异性总是适用于一个 CSS 类来覆盖另一个。 Just make sure you use a CSS selector that is that same as, or more specific than the bootstrap.css只需确保使用与 bootstrap.css 相同或更具体的 CSS 选择器

For example, consider the Bootstrap 4 dark Navbar link color.例如，考虑 Bootstrap 4 深色导航栏链接颜色。 Here's the bootstrap.css ...这是bootstrap.css ...

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}

So, to override the Navbar link color, you can use the same selector, or a more specific selector such as:因此，要覆盖导航栏链接颜色，您可以使用相同的选择器，或更具体的选择器，例如：

#mynavbar .navbar-nav .nav-link {
    color: #ffcc00;
}

For example: https://codeply.com/p/FyQapHImHg例如： https ://codeply.com/p/FyQapHImHg

When the CSS selectors are the same, the last one takes precedence, which it why the styles.css should follow the bootstrap.css .当 CSS 选择器相同时，最后一个优先，这就是为什么styles.css应该遵循bootstrap.css的原因。

解决方案6
 9  2018-08-28 04:57:24

To reset the styles defined for legend in bootstrap, you can do following in your css file:要在引导程序中重置为legend定义的样式，您可以在您的 css 文件中执行以下操作：

legend {
  all: unset;
}

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

The all property in CSS resets all of the selected element's properties, except the direction and unicode-bidi properties that control text direction. CSS 中的 all 属性重置所有选定元素的属性，除了控制文本方向的方向和 unicode-bidi 属性。

Possible values are: initial , inherit & unset .可能的值是： initial 、 inherit & unset 。

Side note: clear property is used in relation with float ( https://css-tricks.com/almanac/properties/c/clear/ )旁注： clear属性与float相关使用（ https://css-tricks.com/almanac/properties/c/clear/ ）

解决方案7
 5  2019-08-05 20:12:32

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

  1. For simple CSS Overrides, you can add a custom.css below the bootstrap.css对于简单的 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">

  2. For more extensive changes, SASS is the recommended method.对于更广泛的更改，SASS 是推荐的方法。

    • create your own custom.scss创建自己的 custom.scss
    • import Bootstrap after the changes in custom.scss在 custom.scss 更改后导入 Bootstrap

    • 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...例如，让我们将正文背景颜色更改为浅灰色#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";

解决方案8
 4  2017-12-10 08:35:27

A bit late but what I did is I added a class to the root div then extends every bootstrap elements in my custom stylesheet:有点晚了，但我所做的是我在根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>

解决方案9
 3  2013-12-21 17:11:20

If you are planning to make any rather big changes, it might be a good idea to make them directly in bootstrap itself and rebuild it.如果您打算进行任何相当大的更改，那么直接在引导程序本身中进行更改并重建它可能是一个好主意。 Then, you could reduce the amount of data loaded.然后，您可以减少加载的数据量。

Please refer to Bootstrap on GitHub for the build guide.请参阅GitHub 上的 Bootstrap 以获取构建指南。

解决方案10
 1  2017-11-25 10:21:03

I found out that (bootstrap 4) putting your own CSS behind bootstrap.css and .js is the best solution.我发现（bootstrap 4）将你自己的 CSS 放在bootstrap.css和 .js 后面是最好的解决方案。

Find the item you want to change (inspect element) and use the exact same declaration then it will override.找到您要更改的项目（检查元素）并使用完全相同的声明，然后它将覆盖。

It took me some little time to figure this out.我花了一些时间才弄清楚这一点。

解决方案11
 0  2022-05-26 03:01:00

for ruby on rails users--对于 ruby​​ on rails 用户——

in your application css file, make sure the bootstrap file is mentioned first then the custom css stylesheet.在您的应用程序 css 文件中，确保首先提及引导文件，然后是自定义 css 样式表。 This way the latter CSS code that you wrote overwrites the former.这样，您编写的后一个 CSS 代码将覆盖前者。 Use !important if needed as well如果需要，也可以使用 !important

 *= require 'bootstrap.min'
 *= require_self
 *= require 'name_of_your_stylesheet'

解决方案12
 -1  2019-08-03 17:48:06

  1. Inspect the target button on the console.检查控制台上的目标按钮。
  2. Go to elements tab then hover over the code and be sure to find the default id or class used by the bootstrap.转到元素选项卡，然后将鼠标悬停在代码上，并确保找到引导程序使用的默认 id 或类。
  3. Use jQuery/javascript to overwrite the style/text by calling the function.使用 jQuery/javascript 通过调用函数来覆盖样式/文本。

See this example:看这个例子：

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

解决方案13
 -4  2018-05-25 07:10:44

Give ID to legend and apply css.为图例提供 ID 并应用 css。 Like add id hello to legend() the css is as follw:就像将 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;
}

解决方案14
 -10  2017-05-29 02:04:24

Use jquery css instead of css .使用 jquery css 而不是 css 。 . . . . jquery have priority than bootstrap css... jquery 比 bootstrap css 优先...

eg例如

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


);

 instead of

.mnu
{

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

}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为 CSS 覆盖引导程序 styles？ - Override Bootstrap styles for CSS? 如何为“.navlink”覆盖 Bootstrap 的 CSS styles？ - How to override CSS styles of Bootstrap for ".navlink"? 如何覆盖<a>元素的 Bootstrap CSS？</a> - How can I override Bootstrap CSS of an <a> element? 如何使用 CSS 覆盖包含元素的内联样式？ - How can I override inline styles on contained elements with CSS? 我如何覆盖保证金：0; 填充：0; 边界：0; 来自主体css的css样式为ul li - How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li 如何使用自定义的style.css覆盖引导程序？ - How can I override bootstrap with my customized style.css? css覆盖删除未使用的样式bootstrap - css override delete unused styles bootstrap 如何使用 Firefox userContent.css 覆盖本地 html 页面的 styles？ - How can I override styles of a local html page using Firefox userContent.css? 如何覆盖CSS分组样式 - How to override css grouped styles 如何覆盖CSS？ - How can I override CSS?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM