为多个超大屏幕设计样式 - Bootstrap

Question

我希望我的主页具有多个 Jumbotron，但是当我尝试在我的 css.css 文件中设置 Jumbotron 类的样式时，它们的样式会应用于每个 jumbotron。在不使用内联 css 的情况下，如何在我的 css 文件中单独修改超大屏幕？

我的 css.css 文件，jumbotron 类。目前，更改应用于我主页上的两个超大屏幕，当我只想将下面的 css 应用于第一个时。

.jumbotron{
    width:100%;
    height: 1400px;
    background-color:#f39c12;
    padding:0px;
    margin:0px;
    opacity: 0.7;
    text-align: center;
}

我的主页。我希望两个超大屏幕不同

<div class="jumbotron">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

Answer 1

添加另一个类以获得特异性..

<div class="jumbotron jumbotron-special">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

CSS

.jumbotron-special{
    width:100%;
    height: 1400px;
    background-color:#f39c12;
    padding:0px;
    margin:0px;
    opacity: 0.7;
    text-align: center;
}

演示：http : //www.bootply.com/122798