Question

所以我在bootstrap中创建一个网站，并且我在div中拥有3个背景。问题是，第二个和第三个背景不会出现在第一个背景下。所以页面只显示为一个只有.one背景的div，其他的则不会出现。它之前有用......所以我不知道我是不是搞砸了什么东西毁了它什么的呢？

HTML：

<body>

<div class="container-fluid one">
    <nav>
        <li class="nav-item">
            <a class="nav-link" href="">HOME</a>
            <br>
            <a class="nav-link" href="">OVER DE CAMPAGNE</a>
            <br>
            <a class="nav-link" href="">WORD JIJ BESPEELD?</a>
        </li>
    </nav>
    <img class="sire" src="img/Sire.png">
        <h2 class="headline">Wees geen pop,<br>
            want je valt hardop
        </h2>
        <div class="center"><img class="marionet" src="img/marionet.png">
    </div>
</div>
<div class="container-fluid two">

</div>

<div class="container-fluid three">

</div>        

</body>

CSS：

a {
    font-family: Zing Rust Demo Base;
    text-decoration: none;
    color: white;
    font-size: 48px;
    letter-spacing: 3px;
    line-height: 1.75;
}

a:hover {
    text-decoration: none;
    color: white;
}

li {
    list-style-type: none;
}

h2 {
    font-family: Zing Rust Demo Base;
    font-size: 36px;
    color: white;
}

.headline {
    padding-top: 400px;
    padding-left: 15px;
}

.sire {
    height: 50px;
    width: 125px;
    float: right;
    margin-top: 450px;
}

.marionet {
    width: 400px;
    height: 700px;
    margin-top: -800px;
    margin-left: 570px;
}

.center {
    display: inline;
}

.one {
    background-image: url(../img/Deel1.png);
    background-repeat: no-repeat;
}

.two {
    background-image: url(../img/Deel2.png);
    background-repeat: no-repeat;
}

.three {
    background-image: url(../img/Deel3.png);
    background-repeat: no-repeat;
}

Answer 1

这是因为那些容器是空的。您需要在每个行中添加至少一个行列对。

创建了这些行 - 列对后，您需要在列中添加一些内容，或者您需要为这些列指定高度，否则它们将为零高度，这就是您不在的原因＆＃ 39;看看那些背景图片。

这是2个空容器的代码应该是这样的：

＆＃13;

<div class="container-fluid two">
<div class="row">
    <div class="col">
        Content <br> goes <br> here...
    </div>
</div>
</div>

<div class="container-fluid three">
    <div class="row">
        <div class="col">
            Content goes here...
        </div>
    </div>
</div>

＆＃13;

当然，您可以在每行中放置多个列。

Bootstrap赢得了第二，第三背景

1 个答案: