Question

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

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

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

我的主页。我希望两个jumbotrons不同

<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

Answer 2

课程有效，但它们可以重复使用。 ID似乎更适合这种情况，因为它用于标识唯一的DOM对象，并且只能使用一次。

Answer 3

用这个来工作 html <div class="jumbotron" id="jumbotron-body"> </div>

css .jumbotron#jumbotron-body { background-color: red; }

造型多个jumbotrons - Bootstrap

3 个答案: