3

目前我正在使用引导程序。对于主题，我使用 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

4

3 回答 3

3

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

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

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

于 2014-09-12T15:11:25.110 回答
0

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

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

于 2015-01-17T00:38:44.327 回答
0

尝试使用警报更改bg

<div class="jumbotron alert-success">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
于 2021-11-10T04:17:53.120 回答