为什么Bootstrap CSS在其他项目中没有重写相同的代码？

问题描述

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

I have such problem. I'm working with project, but when I copy the same files from server it looks different - some Bootstrap styling is not overrided.

这里是工作站头的截图：

Here is screenshots of working site header:

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

and what I see when opening THE SAME PROJECT on my computer:

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

I looked in Firebug and I see, that active link use this default Bootstrap styling:

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

因此，我看到它并没有覆盖 -

So, as I see it is not overriding - WHY?

推荐答案

尝试这样：你应该有一个.scss（或.sass？）文件来收集所有组件。在MY的情况下，它被称为styles.scss

Try this: You should have a .scss (or .sass?) file to gather all the components. In MY case it is called styles.scss

元素在此文件中出现的顺序很重要 - 因为第一个条目覆盖后面的变量！

The order in which the elements appear in this file is important - as the first entries overwrite the later ones - in case of variables! But put your styling(!) changes after your bootstrap entry.

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

My styles.scss file looks like this:

// 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";

这篇关于为什么Bootstrap CSS在其他项目中没有重写相同的代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！