Question

我正在使用twbs bootstrap 3.3.6与Meteor并尝试设置<fieldset>的样式。

但是，当我使用Chrome检查器时，它表示该样式来自bootstrap.css，即使我尝试使用特定于类的ID和特定于ID的CSS。

我的样式表位于应用程序根目录中，正如一些答案所示。

我对meteor和css很新，所以我可能会犯一个新手错误。

否则，覆盖bootstrap css设置的最佳做法是什么？

Answer 1

通常如果你想覆盖css，你应该将你的css文件放在所有其他文件之后，例如bootstrap css，因为css从上到下开始，所以底线是将要执行的，例如：

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />

此外，您可以在每个css行的末尾添加!important，无论行索引如何，都将该样式赋予最高优先级，例如：

.someclass {
    color: red!important;
}

Answer 2

您可以覆盖css中同一类的特定属性...

.btn {
  background-color: #fff !important;
}

...创建一个继承映射，使其仅适用于另一个特定元素内的元素......

div.classForSpecificContainer btn {
  background-color: #fff !important;
}

或指定您自己的类并将其添加到相关元素

myOverrideClass {
  background-color: #fff !important;
}

.. 重要部分是您使用!important;来阻止Bootstrap覆盖它。即使CSS文件以不正确的顺序加载，这通常也会解决问题，但并非总是如此。我已经养成了将我的CSS文件添加到与z-相同的文件夹中的习惯，以确保它们最后加载，如果我使用像Meteor那样合并和压缩CSS的东西。

Answer 3

这似乎是Meteor中的常见问题，因为它们的构建方式将合并的样式表注入到html <header>的顶部而不是底部。有一个merged PR看起来可以在1.6.2中使用，它允许您将伪标签放在<head>中希望合并的css注入的任何位置。

示例：1.6.2中提议的可用性 - PR已合并

<head>
    <link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
    <meteor-bundled-css/>
</head>

一旦合并的PR包含在下一个版本中，这将有效。

直到那时......

解决方案1：如果您正在使用引导程序LESS或SCSS文件，则可以将其导入client/main.less或client/main.scss文件，然后在此之后导入覆盖文件。看起来你正在使用pre =编译的css，所以转到SOLUTION 3。

解决方案2：在行尾使用！important ... BAD 不建议练习。如果你使用重要的话就打破了级联。

解决方案3：将第三方库覆盖文件放在公用文件夹中，并手动<link>位于头部引导程序<link>下方。 我现在建议。