1

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

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

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

我查看了 Firebug，发现该活动链接使用此默认引导样式：

  .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);
}

所以，正如我所见，它并没有压倒一切 - 为什么？

4

3 回答 3

2

试试这个：你应该有一个 .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";
于 2012-10-10T12:53:05.533 回答
1

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

于 2012-10-10T09:58:38.503 回答
0

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

您还没有向我们提供您尝试覆盖的任何代码，所以我不能肯定地说，但是在上面的代码中，您不能只覆盖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 的单独层中，因此您不必接触源代码（以及其他好东西）。

于 2012-10-10T13:58:54.477 回答