如何改写 Bootstrap 的造型

我怎样才能在 Bootstrap 中覆盖样式？例如，我目前正在使用。具有 CSS 规则‘ float: left;’的侧边栏类; 如何更改它以使其转向右边？我使用的是 HAML 和 SASS，但是对于 web 开发来说我还是个新手。

157165 次浏览
小开
最佳答案

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

.sidebar.right {
float:right
}
小开

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

您可以查看 HTML 树，并指定父元素:

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

如果需要的话，你可以一直走到 BODY:

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

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

小开

所有这些提示都会起作用，但是一个更简单的方法可能是将您的样式表 之后包含在 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，我对它们的了解还不足以编写教程。

小开

这么晚才发现，但我觉得可能需要另一个答案。

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

也看看这个: Rails 中适当的 SCSS 资产结构

小开

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

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

小开

这个问题的答案是 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 链接。

小开

如果你想在引导程序中覆盖任何 css，使用

假设这是 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;
}

请注意! 的重要性与我的页边距，这将覆盖边距的引导启动页面标题类的边距。

小开

你只需要确保你的 css 文件解析 之后 boostrap.css，就像这样:

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


提交答案