129

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

4

8 回答 8

233

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

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

例如，如果这是您在您的<head>

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

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

.sidebar {
    float: right;
}

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

于 2011-11-10T20:34:38.513 回答
58

答案是 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 aafter.navbar ul li 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 链接。

于 2013-12-12T11:30:36.317 回答
41

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

.sidebar.right { 
    float:right
}
于 2011-11-10T19:37:53.893 回答
20

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

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

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

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

body .sidebar { ... }几乎会覆盖任何东西。

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

于 2011-11-10T19:50:20.260 回答
9

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

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

于 2015-10-24T23:54:50.523 回答
6

如果您想覆盖引导程序中的任何 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 页眉类边距的边距。

于 2014-02-17T05:20:01.660 回答
3

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

如果您使用的是 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

于 2012-11-20T21:44:30.710 回答
2

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

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

于 2013-04-03T05:44:27.553 回答