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

Question

我有这样的问题。我正在使用项目，但是当我从服务器复制相同的文件时它看起来不同 - 一些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，而是{{ 1}}等等。

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

-webkit-box-shadow

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

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

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