覆盖引导样式答案

【问题标题】：Overriding bootstrap styles覆盖引导样式
【发布时间】：2014-05-01 23:29:23
【问题描述】：

我有一个 bootstrap.min.css 和以下 div。

<div class='jumbotron'> 
</div>

我正在使用自定义 css 文件覆盖这个类。

.jumbotron{
    background: green url(../img/city.jpg) no-repeat top left;
}

但是jumbotron 类的内容并没有改变。我知道 css 包含正确，因为它适用于与引导程序没有名称的其他 div。我该如何解决这个问题？

【问题讨论】：

你是在html中的bootstrap.min.css之后调用自定义css文件吗？
@13ruce1337 当然。正如我所说，其他 div 正在正确呈现。
同时检查图片是否存在于 css 文件的路径中。
你能举个例子吗？
@Adrift 实际上没有什么可包含的。我正在做一个干净的项目。我安装了新的 Larvel，Bootstrap。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在 Chrome 的开发者工具中检查元素（或者 Firefox 有类似的东西，不知道他们叫什么）。

Right click > Inspect Element

现在看看右边的 CSS 样式。您是否在列表中的某处看到您的自定义样式？您可能需要向下滚动一点。

如果它不在列表中，则表示您的 CSS 文件未正确包含或元素名称拼写错误，因此您的样式未应用。

如果它在列表中但被划掉，这意味着引导程序的一种样式可能会覆盖它。您可以使用 more specific selector 使您的样式优先于引导程序的样式

【讨论】：

实际上，我可以看到我的 css 已包含在内。因为当我从开发人员工具中单击它时，我可以看到它。其他不包含引导程序名称的元素正在正确渲染，来自服装 css 文件
您可以在元素检查器中看到您的样式，但不能反映在页面上？尝试添加一些不可错过的内容，例如 width: 500px; height: 500px; background-color: green，看看它是否会出现。

【解决方案2】：

您的自定义 CSS 文件是否在 bootstap.min.css 之后调用。也许 bootstrap.min.css 更重要：

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

以上链接示例：

* {} /* a=0 b=0 c=0 d=0 -> 特异性 = 0,0,0,0 /
li {} / a=0 b=0 c=0 d=1 -> 特异性 = 0,0,0,1 /
li:first-line {} / a=0 b=0 c=0 d=2 -> 特异性 = 0,0,0,2 /
ul li {} / a=0 b=0 c=0 d=2 -> 特异性 = 0,0,0,2 /
ul ol+li {} / a=0 b=0 c=0 d=3 -> 特异性 = 0,0,0,3 */
h1 + [rel=up]{} / a=0 b=0 c=1 d=1 -> 特异性 = 0,0,1,1 /
ul ol li.red {} / a=0 b=0 c=1 d=3 -> 特异性 = 0,0,1,3 /
li.red.level {} / a=0 b=0 c=2 d=1 -> 特异性 = 0,0,2,1 /
#x34y {} / a=0 b=1 c=0 d=0 -> 特异性 = 0,1,0,0 /
style="" / a=1 b=0 c=0 d=0 -> 特异性 = 1,0,0,0 */

<HEAD>
<STYLE type="text/css">
  #x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

在上面的例子中，P 元素的颜色是绿色。由于级联规则 3，“style”属性中的声明将覆盖 STYLE 元素中的声明，因为它具有更高的特异性。

【讨论】：

不。它被称为custom.css
我的意思不是像你所说的那样被称为。我的意思是按加载顺序调用。
它的调用方式与本例中的完全一样。 getbootstrap.com/getting-started 在“基本模板”部分

【解决方案3】：

确保.jumbotron CSS 覆盖遵循 HTML 文件中的 bootstrap.min.css。

演示：http://bootply.com/tbFqSQQcOi

【讨论】：

不。我不认为是这样。这是我遇到的最奇怪的问题。我认为这可能来自缓存。我正在使用 Laravel。所以，我会看看 laravel 部分