如何使用外部自定义 CSS 覆盖 bootstrap 3 样式? [英] How do you override bootstrap 3 styles with external custom CSS?

查看:36
本文介绍了如何使用外部自定义 CSS 覆盖 bootstrap 3 样式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使用外部自定义 CSS 覆盖引导程序 3 样式?

How do you override bootstrap 3 styles with external custom CSS?

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet"/>
<link href = "css/styles.css" rel = "stylesheet"/>


<div class = "navbar navbar-inverse navbar-fixed-top"></div>

CSS

.navbar-inverse {
    background-color: #FF0000;
}

推荐答案

需要考虑以下几点:

  • 样式表顺序 - 您尝试覆盖的样式表应该放在第一位.

  • Stylesheet order - The stylesheet you are trying to overwrite should come first.

6.4.1 级联顺序

最后,按指定的顺序排序:如果两个声明具有相同的权重、来源和特异性,则指定的后者获胜.导入的样式表中的声明被视为在样式表本身的任何声明之前.

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

在你的情况下,这应该不是问题.

In you case this shouldn't be an issue.

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

简而言之,您应该使用具有相同特异性的选择器(假设它稍后出现并覆盖初始声明),或者使用更具体的选择器.

Put briefly, you should use a selector with the same specificity (assuming it appears later and will overwrite the initial declaration), or a selector that is more specific.

Bootstrap 3 的默认样式对 navbar 的颜色使用以下内容:

Bootstrap 3's default styling uses the following for the navbar's color:

.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}

您可以尝试使用更具体的选择器:

You could try using a more specific selector:

.navbar.navbar-inverse {
    background-color: #FF0000;
}

  • 样式表路径 - 如果所有其他方法都失败了,那么您的样式表路径一定是错误的.
  • Stylesheet paths - If all else fails, your stylesheet path(s) must be wrong.

这篇关于如何使用外部自定义 CSS 覆盖 bootstrap 3 样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆