覆盖引导样式 [英] Overriding bootstrap styles

问题描述

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

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

我使用自定义css文件覆盖此类。

  .jumbotron {
 background：green url（../ img / city.jpg） ; 
} 
  

但是类 jumbotron 不变。我知道css被正确地包括，因为它适用于其他div不共享没有名称与引导。
我如何解决这个问题？

解决方案

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

右键单击>检查元素

现在看看右边的CSS样式。你看到你的自定义风格在列表中的某个位置吗？

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

如果它在列表中，但是越过了，那意味着bootstrap的样式之一可能会覆盖它。您可以使用更具体的选择器，使您的样式优先于引导风格

I have a bootstrap.min.css and the following div.

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

I am overriding this class using a custom css file.

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

But the contents of the class jumbotron are not changing. I know the css is included properly, because it works for other divs that share no name with bootstrap. How do I solve this problem?

解决方案

Inspect the element in Chrome's developer tools (or Firefox has something similar, don't know what they call it).

Right click > Inspect Element

Now look at the CSS styles to the right. Do you see your custom style somewhere in the list? You may have to scroll down a bit.

If it's not in the list, that means your CSS file is not getting included properly or the element name is misspelled, so your styles are not being applied.

If it is in the list but crossed off, that means one of bootstrap's styles is probably overriding it. You can make your styles take precedence over bootstrap's styles by using a more specific selector

这篇关于覆盖引导样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！