logo标签列表

如何在 Twitter Bootstrap 中覆盖样式

csstwitter-bootstrap
129

如何覆盖Twitter Bootstrap中的样式？例如，我当前正在使用一个包含CSS规则'float:left;'的.sidebar类。我该如何更改它，使其向右浮动？我正在使用HAML和SASS，但对Web开发相对较新。

另请参见：https://dev59.com/q2oy5IYBdhLWcg3wYc4l - Carol Skelly
8个回答
233
所有这些技巧都是可行的，但更简单的方法可能是在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，因为我不太熟悉它们，无法撰写有关它们的教程。

7
我认为没有任何理由不行。经验法则是如果两种样式具有相同的特定级别，第二种样式将始终优先于第一种。只要您的样式在其后面，它就会覆盖前面的样式。 - citelao
3
这可能与CSS的特异性有很大关系。你可以阅读这篇文章（旧文章），但基本上，.sidebar.right比.sidebar更具体。那可能就是问题所在。使用Web检查工具找出覆盖它的内容。 - citelao
2
@Kreker 是的，这就是想法。使用 !important 的问题在于你将来永远无法再次覆盖它。 - citelao
5
我的Site.css被捆绑并列在Bundle.config中，并在bootstrap.css之后物理呈现，但样式仍未被覆盖。我不得不将site.css的引用从modernizer捆绑包中移除，并手动将其放在bootstrap.css之后（在调试时按Ctrl + F5清除缓存）。 - atconway
1
这可能可行，但在生产中不是最佳实践。每个站点加载1个样式表，除非有重大原因不这样做。＃sitespeed - Ben Racicot
显示剩余9条评论
58
这个问题的答案是CSS特异性。你需要在CSS中更加“具体”，这样它就可以覆盖bootstrap CSS属性。
例如，你有一个Bootstrap菜单的示例代码如下：
<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链接。

1
如果它们打成平局呢？ - Confused
2
不用担心，例如'.abc.xyz'表示有一个类名为'abc'和'xyz'的元素 - 它仍将被视为具有一个类名的单个元素。因此，得分为10分。对于ID也是一样。 - kaizer1v
1
写得很好！谢谢！ - GobSmack
1
这对我来说是个技巧。我在覆盖Bootstrap CSS中的blockquote样式时遇到了麻烦。奇怪的是，对于普通的引用块，它是错误的，但对于引用块内的<ul>看起来是正确的。关键是更新我的CSS以具有blockquote p，这足够优先级。<ul>正在为页面的另一部分执行此操作。 - Adam Wuerl
41

添加自己的 class，例如：<div class="sidebar right"></div>，其对应的 CSS 样式为

.sidebar.right { 
    float:right
}
1
不好的实践：https://github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes - Damjan Pavlica
2
@DamjanPavlica 说实话，你还在意IE 6吗？更不用说，我认为Bootstrap使用了链式结构。 - Błażej Michalik
20

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

你需要沿着HTML树向上，指定父元素：

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

如果需要，你可以一直向上到BODY：

body .sidebar { ... } 会覆盖几乎所有的东西。

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

这实际上是最好的答案。 - CodyBugstein
9

您只需确保您的css文件在boostrap.css之后解析，像这样：

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

6

如果您想覆盖Bootstrap中的任何CSS，请使用!important

假设这是Bootstrap中的页面头部类，其顶部有40像素的边距，我的客户不喜欢它，他只希望顶部为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页面标题类的边距。
太棒了！这正是我想要的。谢谢。 - diwatu
2
请注意，使用!important有点反模式。在此阅读更多信息：http://james.padolsey.com/css/dont-use-important/ - mayatron
3
我来翻译这段内容。该段文字涉及编程和网页设计方面的内容。

我晚些时候看到了这个问题，但我认为它还需要另一个答案。

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

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

$bodyBackground: red;
@import "bootstrap";

如果没有可用于更改所需内容的变量，您可以覆盖样式或添加自己的样式。

Sass:

如果没有可用的变量来更改所需的内容，您可以覆盖样式或添加自己的样式。
@import "bootstrap";

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

还可以查看这个: 在Rails中正确使用SCSS资源结构

2

我知道这是一个老问题，但我还是遇到了类似的问题，并且我意识到我在bootstrapOverload.css文件中的“不工作”的CSS代码是写在媒体查询之后的。当我将其移动到媒体查询之前时，它开始工作。

以防其他人也面临同样的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接