为什么Bootstrap CSS没有覆盖其他具有相同代码的项目？

我有这样的问题。 我正在使用项目，但是当我从服务器复制相同的文件时它看起来不同 – 一些Bootstrap样式没有被覆盖。

以下是工作站点标题的屏幕截图：

以及我在计算机上打开相同项目时看到的内容：

我查看了Firebug，我看到，该活动链接使用此默认的Bootstrap样式：

.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { color: #555555; text-decoration: none; background-color: #e6e6e6; -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); } 

所以，我认为这不是压倒一切 – 为什么？

Answer 1

试试这个：你应该有一个.scss（或.sass？）文件来收集所有组件。 在我的例子中，它被称为styles.scss

元素在此文件中出现的顺序很重要 – 因为第一个条目会覆盖后面的条目 – 如果是变量！ 但是在引导条目之后进行样式（！）更改。

我的styles.scss文件如下所示：

 // myVars @import "myvariables"; // My vars first to overwrite // This file is a starting point for the project @import "bootstrap"; // Include my layout tweeks @import "assets/layout-tweaks"; @import "assets/hero-swapper"; @import "assets/someotherelement"; // Include responsive Bootstrap styles @import "bootstrap-responsive"; 

Answer 2

您可以执行常见的css文件，您可以按所需顺序导入bootstrap css和其他自定义css。 在布局中，您只需要包含这个常见的css文件。

Answer 3

您的样式可能不会覆盖，因为您需要覆盖属性的多个实例。

你没有向我们提供你试图覆盖的任何代码，所以我不能肯定地说，但在上面的代码中，你不能只是覆盖box-shadow而是-webkit-box-shadow等。

使用Bootstrap的Github项目中的源LESS文件时，这样做更容易，您可以将其定义为

 .box-shadow(1px 1px 5px #e1e1e1); 

它会自动为box-shadow写出所有这些属性。

以下是Bootstrap关于如何执行此操作的说明： http ： //twitter.github.com/bootstrap/extend.html

还有Kickstrap ，它已经设置为这样做。 它将您的自定义设置保留在与Bootstrap不同的层中，因此您不必触摸源代码（也包括其他好东西）。