CSS 如何在 Twitter Bootstrap 中覆盖样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8084964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overwrite styling in Twitter Bootstrap
提问by John
How can I overwrite the stylings in Twitter Bootstrap? For instance, I am currently using a .sidebar class that has the CSS rule 'float: left;' How can I change this so that it goes to the right instead? I'm using HAML and SASS but am relatively new to web development.
如何覆盖 Twitter Bootstrap 中的样式？例如，我目前使用的 .sidebar 类具有 CSS 规则 'float: left;' 我怎样才能改变它，让它向右转？我正在使用 HAML 和 SASS，但对 Web 开发相对较新。
采纳答案by motoxer4533
Add your own class, ex: <div class="sidebar right"></div>, with the CSS as
添加您自己的类，例如：<div class="sidebar right"></div>，CSS 为
.sidebar.right {
float:right
}
回答by citelao
All these tips will work, but a simpler way might be to include your stylesheet afterthe Bootstrap styles.
所有这些技巧都会起作用，但更简单的方法可能是在 Bootstrap样式之后包含您的样式表。
If you include your css (site-specific.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
如果site-specific.css在 Bootstrap 的( ) 之后包含 css ( ) bootstrap.css，则可以通过重新定义规则来覆盖规则。
For example, if this is how you include CSS in your <head>
例如，如果这是你在你的 <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
You can simply move the sidebar to the right by writing (in your site-specific.cssfile):
您可以通过编写（在您的site-specific.css文件中）简单地将侧边栏向右移动：
.sidebar {
float: right;
}
Forgive the lack of HAML and SASS, I do not know them well enough to write tutorials in them.
请原谅缺少 HAML 和 SASS，我对它们的了解不够深入，无法在其中编写教程。
回答by kaizer1v
The answer to this is CSS Specificity. You need to be more "specific" in your CSS so that it can override bootstrap css properties.
对此的答案是 CSS 特异性。您需要在 CSS 中更加“具体”，以便它可以覆盖 bootstrap css 属性。
For example you have a sample code for a bootstrap menu here:
例如，这里有一个引导菜单的示例代码：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div id="home-menu-container" class="collapse navbar-collapse">
<ul id="home-menu" class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
<li><a href="#intro">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">What We Do</a></li>
<li><a href="#process">Our Process</a><br /></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
Here, you need to remember the hierarchy of the specificity. It goes like this:
在这里，您需要记住特异性的层次结构。它是这样的：
- Give an element with an id mentioned 100 points
- Give an element with a class mentioned 10 points
- Give a simple element a single 1 point
- 给一个 id 提到100 点的元素
- 给一个类提到的元素10 分
- 给一个简单的元素一个1 分
So, for the above if your css has something like this:
因此，对于上述情况，如果您的 css 是这样的：
.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */
So, even if you have defined the .navbar aafter .navbar ul li ait is still going to override with a red colour, instead of a green since the specificity is more (13 points).
所以，即使你已经定义了.navbar aafter.navbar ul li a它仍然会用红色覆盖，而不是绿色，因为特异性更高（13 分）。
So, basically all you need to do is calculate the points for the element you are wanting to change the css for, via inspect element on your browser. Here, bootstrap has specified its css for the element as
因此，基本上您需要做的就是通过浏览器上的检查元素计算要为其更改 css 的元素的点数。在这里，bootstrap 已将元素的 css 指定为
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}
So, even if your css is loading is being loaded after bootstrap.css which has the following line:
因此，即使您的 css 正在加载，也是在 bootstrap.css 之后加载的，它具有以下行：
.navbar-nav li a {
color: red;
}
it's still going to be rendered as #999. In order to solve this, bootstrap has 22 points (calculate it yourself). So all we need is something more than that. Thus, I have added custom IDs to the elements i.e. home-menu-container and home-menu. Now the following css will work:
它仍然会被渲染为#999。为了解决这个问题，bootstrap 有 22 个点（自己计算）。所以我们需要的不仅仅是这些。因此，我为元素添加了自定义 ID，即 home-menu-container 和 home-menu。现在以下 css 将起作用：
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */
Done.
完毕。
You can refer to this MDN link.
你可以参考这个MDN 链接。
回答by Diodeus - James MacFarlane
You can overwrite a CSS class by making it "more specific".
您可以通过使其“更具体”来覆盖 CSS 类。
You go up the HTML tree, and specify parent elements:
您向上 HTML 树，并指定父元素：
div.sidebar { ... }is more specific than .sidebar { ... }
div.sidebar { ... }比 .sidebar { ... }
You can go all the way up to BODY if you need to:
如果您需要，您可以一直到 BODY：
body .sidebar { ... }will override virtually anything.
body .sidebar { ... }将覆盖几乎任何东西。
See this handy guide: http://css-tricks.com/855-specifics-on-css-specificity/
请参阅这个方便的指南：http: //css-tricks.com/855-specifics-on-css-specificity/
回答by Gothburz
You can just make sure your css file parses AFTERboostrap.css , like so:
您可以确保您的 css 文件在boostrap.css之后解析，如下所示：
<link href="css/bootstrap.css" rel="stylesheet"><link href="css/myFile.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet"><link href="css/myFile.css" rel="stylesheet">
回答by Ali Adravi
If you want to overwrite any css in bootstrap use !important
如果你想在 bootstrap 中覆盖任何 css，请使用 !important
Let's say here is the page header class in bootstrap which have 40px margin on top, my client don't like it and he want it to be 15 on top and 10 on bottom only
假设这里是引导程序中的页面标题类，它的顶部有 40px 的边距，我的客户不喜欢它，他希望它的顶部为 15，底部为 10
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 20px;
padding-bottom: 9px;
}
So I added on class in my site.css file with the same name like this
所以我在我的 site.css 文件中添加了同名的类
.page-header
{
padding-bottom: 9px;
margin: 15px 0 10px 0px !important;
}
Note the !important with my margin, which will overwrite the margin of bootstarp page-header class margin.
注意 !important 与我的边距，它将覆盖 bootstarp 页眉类边距的边距。
回答by AJcodez
Came across this late, but I think it could use another answer.
这么晚才遇到，但我认为它可以使用另一个答案。
If you're using sass, you can actually change the variables before you import bootstrap. http://twitter.github.com/bootstrap/customize.html#variables
如果您使用的是 sass，您实际上可以在导入引导程序之前更改变量。http://twitter.github.com/bootstrap/customize.html#variables
Change any of them, such as:
更改其中任何一个，例如：
$bodyBackground: red;
@import "bootstrap";
Alternatively if there isn't a variable available for what you want to change, you can override the styles or add your own.
或者，如果没有可用于您想要更改的变量，您可以覆盖样式或添加您自己的样式。
Sass:
萨斯：
@import "bootstrap";
/* override anything manually, like rounded buttons */
.btn {
border-radius: 0;
}
Also see this: Proper SCSS Asset Structure in Rails
另请参阅：Rails 中的正确 SCSS 资产结构
回答by md1hunox
I know this is an old question but still, I came across a similar problem and i realized that my "not working" css code in my bootstrapOverload.cssfile was written after the media queries. when I moved it above media queries it started working.
我知道这是一个老问题，但仍然遇到了类似的问题，我意识到我的bootstrapOverload.css文件中的“不起作用”的 css 代码是在media queries. 当我将它移到媒体查询上方时，它开始工作。
Just in case someone else is facing the same problem
以防万一其他人面临同样的问题
