Question

如何覆盖Twitter Bootstrap中的样式？例如，我目前正在使用具有CSS规则'float：left;'的.sidebar类。我怎样才能改变它，以便它向右转？我正在使用HAML和SASS，但它对于Web开发来说相对较新。

Answer 1

所有这些提示都可行，但更简单的方法可能是在 Bootstrap样式之后包含样式表。

如果在引导程序（site-specific.css）之后包含css（bootstrap.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的缺乏，我不太清楚他们在其中编写教程。

Answer 2

答案是CSS特异性。您需要在CSS中更“具体”，以便它可以覆盖bootstrap 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 a之后定义了.navbar ul li a，它仍然会用红色覆盖，而不是绿色，因为特异性更多（13分）。

所以，基本上你需要做的就是通过浏览器上的inspect元素计算你想要改变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，即主菜单容器和主菜单。现在，以下css将起作用：

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

完成。

您可以参考此MDN link。

Answer 3

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

.sidebar.right { 
    float:right
}

Answer 4

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

向上移动HTML树，并指定父元素：

div.sidebar { ... }比.sidebar { ... }

更具体

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

body .sidebar { ... }几乎可以覆盖任何内容。

请参阅此便捷指南：http://css-tricks.com/855-specifics-on-css-specificity/

Answer 5

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

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

Answer 6

如果要覆盖bootstrap中的任何css，请使用！important

让我们说这里是bootstrap中的页眉类，顶部有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页眉类边距的余量。

Answer 7

迟到了，但我认为它可以使用另一个答案。

如果你正在使用sass，你可以在导入bootstrap之前实际更改变量。 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

Answer 8

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

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

如何在Twitter Bootstrap中覆盖样式

8 个答案: