如何在 Twitter Bootstrap 中覆盖样式答案

【问题标题】：How to overwrite styling in Twitter Bootstrap如何在 Twitter Bootstrap 中覆盖样式
【发布时间】：2011-12-26 11:08:44
【问题描述】：

如何覆盖 Twitter Bootstrap 中的样式？例如，我目前正在使用具有 CSS 规则“float:left;”的 .sidebar 类我该如何更改它以使其向右移动？我正在使用 HAML 和 SASS，但对 Web 开发比较陌生。

【问题讨论】：

另见：stackoverflow.com/questions/8596794/…

标签： css twitter-bootstrap

【解决方案1】：

这个问题的答案是 CSS 特异性。您需要在 CSS 中更加“具体”，以便它可以覆盖引导 css 属性。

例如，您在这里有一个引导菜单的示例代码：

<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>

在这里，您需要记住特异性的层次结构。它是这样的：

给一个提到了 id 的元素 100 分
给一个提到的类10分的元素
给一个简单的元素一个1分

所以，如果你的 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 */

因此，即使您在.navbar ul li a 之后定义了.navbar a，它仍然会用红色覆盖，而不是绿色，因为特异性更高（13 分）。

所以，基本上您需要做的就是通过浏览器上的检查元素计算您想要更改 css 的元素的点数。在这里，bootstrap 已将元素的 css 指定为

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

因此，即使您的 css 正在加载，也是在 bootstrap.css 之后加载的，其中包含以下行：

.navbar-nav li a {
    color: red;
}

它仍然会被渲染为#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 :) */

完成。

你可以参考这个MDN link。

【讨论】：

如果他们被绑了怎么办？
没关系，例如 '.abc.xyz' 的意思是，有一个元素具有类 'abc' 和 'xyz' - 它仍然会将它作为具有类的单个元素.因此，10分。 ID 也是如此。
写得好！谢谢！
这对我来说是个窍门。我在覆盖 Bootstrap CSS 中的 blockquote 样式时遇到了麻烦。奇怪的是，正常的块引用是错误的，但在块引用中看起来和

【解决方案2】：

您只需确保您的 css 文件解析 AFTER boostrap.css ，如下所示：

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

【讨论】：

【解决方案3】：

如果您想在引导程序中覆盖任何 css，请使用 !important

假设这里是引导程序中的页眉类，顶部有 40px 的边距，我的客户不喜欢它，他希望它是顶部 15，底部只有 10

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

所以我在我的 site.css 文件中添加了类似这样名称的类

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

注意 !important 与我的边距，这将覆盖 bootstarp page-header 类边距的边距。

【讨论】：

太棒了！这就是我要的。谢谢
请注意，使用 !important 在某种程度上是一种反模式。在这里阅读更多：james.padolsey.com/css/dont-use-important

【解决方案4】：

我知道这是一个老问题，但我仍然遇到了类似的问题，我意识到我的bootstrapOverload.css 文件中的“不工作”css 代码是在media queries 之后编写的。当我将它移到媒体查询上方时，它开始工作。

以防万一其他人面临同样的问题

【讨论】：

【解决方案5】：

这么晚才发现，但我认为它可以使用另一个答案。

如果您使用的是 sass，则实际上可以在导入引导程序之前更改变量。 http://twitter.github.com/bootstrap/customize.html#variables

更改其中任何一个，例如：

$bodyBackground: red;
@import "bootstrap";

或者，如果没有可用于您想要更改的变量，您可以覆盖样式或添加自己的样式。

萨斯：

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

另见：Proper SCSS Asset Structure in Rails

【讨论】：

【解决方案6】：

所有这些技巧都可以使用，但更简单的方法可能是将样式表包含在 Bootstrap 样式之后。

如果您在 Bootstrap (bootstrap.css) 之后包含您的 css (site-specific.css)，则可以通过重新定义规则来覆盖规则。

例如，如果这是您在 <head> 中包含 CSS 的方式

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

您可以通过写入（在您的site-specific.css 文件中）简单地将侧边栏移动到右侧：

.sidebar {
    float: right;
}

请原谅我没有 HAML 和 SASS，我对它们不够了解，无法在其中编写教程。

【讨论】：

@ClaudiuConstantin 我看不出为什么不这样做。经验法则是，如果两种风格的特异性水平相同，则第二种风格将总是胜过第一种风格。只要你的风格出现在它之后就会被覆盖。
@Kreker 这可能与特异性有很大关系。你可以阅读它here（旧文章），但基本上.sidebar.right 比.sidebar 更具体。这大概就是问题所在。使用网络检查器找出覆盖它的内容。
@Kreker 是的，就是这样。 !important 的问题是你以后再也不能覆盖它了。
我的Site.css 被捆绑并列在Bundle.config 中，并在之后 bootstrap.css 进行物理渲染，但样式仍未被覆盖。我不得不将 site.css 引用从 Modernizer 包中取出并手动将其放在 bootstrap.css 之后（并在调试后按 Ctrl + F5 以清除缓存）
这可能有效，但不是生产的最佳实践。每个站点加载 1 个样式表，除非有很大的理由不这样做。 #sitespeed

【解决方案7】：

您可以通过使其“更具体”来覆盖 CSS 类。

沿着 HTML 树向上，并指定父元素：

div.sidebar { ... } 比 .sidebar { ... } 更具体

如果需要，您可以一直到 BODY：

body .sidebar { ... } 将覆盖几乎所有内容。

请参阅这个方便的指南：http://css-tricks.com/855-specifics-on-css-specificity/

【讨论】：

这其实是最好的答案

【解决方案8】：

添加您自己的类，例如：<div class="sidebar right"></div>，CSS 为

.sidebar.right { 
    float:right
}

【讨论】：

不好的做法：github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes
@DamjanPavlica 老实说？你还在乎 IE 6 吗？更不用说，我认为引导程序使用链接。