使用.bg-类覆盖Jumbotron背景颜色

Question

目前我正在使用Bootstrap。对于主题，我使用Bootswatch主题。 我注意到Jumbotron在每个主题中都有相同的丑陋灰色背景。所以我想使用.bg-类来改变颜色。

我也读过：

处理特异性

  

有时由于以下情况而无法应用上下文背景类   另一个选择器的特异性。在某些情况下，足够了   解决方法是将元素的内容包装在类中。

这也是我尝试过的。

我尝试了什么：

<div class="jumbotron bg-success">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

<div class="bg-success">
  <div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
  </div>
</div>

但这不起作用，因为bg-类没有覆盖jumbotron背景颜色。

示例：http://www.bootply.com/yhvhdor7lr

修改

相关：https://github.com/twbs/bootstrap/issues/10202

Answer 1

div将从css的最后一条规则中获取背景。例如，如果在样式表中.jumbotron类在第5行和.bg-success中并且都具有background-color属性，则它将采用最新的行。

[试试这个bootply] {http://www.bootply.com/a123L6HQRi}。将一个班级移到另一个班级的顶部，然后按“运行”，查看结果。

但您使用的是CDN，无法更改规则的顺序或添加!important来解决它。也许你应该考虑添加一个自定义样式表来解决这个问题。

答案 1 :(得分：0)

我知道这可能是一个迟到的建议，但它可以帮助其他人。 我使用下面的代码行，它就是这样做的。请注意，jumbotron-blue-grey-200可以是任何颜色，如成功，危险等。

<div class="jumbotron jumbotron-material-blue-grey-200"> <h1 class="text-primary">Your text here</h1> </div>

Answer 2

我知道这可能是一个迟到的建议，但它可以帮助其他人。 我使用下面的代码行，它就是这样做的。请注意，jumbotron-blue-grey-200可以是任何颜色，如成功，危险等。

<div class="jumbotron jumbotron-material-blue-grey-200"> <h1 class="text-primary">Your text here</h1> </div>