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

Question

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

我还看了:

处理特异性

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a with the class.

所以这也是我尝试过的。

我尝试过的:

<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- 类没有覆盖超大屏幕背景颜色。

示例: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来解决。也许您应该考虑添加自定义样式表来解决这个问题。