如何覆盖Twitter Bootstrap中的样式
我如何覆盖Twitter Bootstrap中的样式？ 例如，我正在使用CSS规则为“float：left”的.sidebar类。 我怎样才能改变这个，让它向右转？ 我正在使用HAML和SASS，但是对于Web开发来说，这是相对较新的。
添加你自己的类，例如： <div class="sidebar right"></div> ，用CSS作为
.sidebar.right { float:right }
所有这些提示都可以工作，但更简单的方法可能是在Bootstrap样式之后join样式表。
如果在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，我不太了解他们编写教程。
对此的答案是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分
- 给一个简单的元素一个点
所以，对于上述如果你的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定义了.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 :) */
完成。
你可以覆盖一个CSS类，使其“更具体”。
你上去的HTML树，并指定父元素：
div.sidebar { ... }比.sidebar { ... }更具体
如果您需要，您可以一直到BODY：
body .sidebar { ... }将几乎覆盖任何东西。
看到这个方便的指南： http : //css-tricks.com/855-specifics-on-css-specificity/
你可以确保你的CSS文件parsing后， boostrap.css，如下所示：
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/myFile.css" rel="stylesheet">
如果你想覆盖任何CSS引导程序使用！重要的
假设这里是引导程序中的页头类，它的顶部有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; }
注意！重要的是我的保证金，它将覆盖bootstarp页头类边距的边距。
遇到这个晚了，但我认为它可以使用另一个答案。
如果你使用sass，你可以在导入bootstrap之前改变variables。 http://twitter.github.com/bootstrap/customize.html#variables
改变它们中的任何一个，例如：
$bodyBackground: red; @import "bootstrap";
或者，如果没有可用于您要更改的variables，则可以覆盖样式或添加自己的样式。
萨斯：
@import "bootstrap"; /* override anything manually, like rounded buttons */ .btn { border-radius: 0; }
另请参阅： 在Rails中正确的SCSS资产结构
我知道这是一个老问题，但仍然遇到了类似的问题，我意识到我的bootstrapOverload.css文件中的“不工作”CSS代码是在media queries后编写的。 当我把它移到媒体查询上面时，它开始工作。
以防万一别人面临同样的问题
