为什么div在Bootstrap中是重叠的？

Question

我的div重叠有问题。当调整窗口的大小时，块"bg2“将列重叠为"bg3”。似乎不知道为什么。我试过把clear: both;放在div之间，但没什么用。

这是我的密码。

<?php include('header.php'); ?>

<div class="bg1">
    <div class="content-container">
        <div class="bg1-text1">
            A Minecraft server ran by IT professionals
        </div>
        <div class="bg1-text2">
            <li>Stable optimized Spigot server</li>
            <li>Highly effective DDoS solution</li>
            <li>Strong anti-cheat solution</li>
            <li>Non-abusive admin staff</li>
            <li>NOT <span style="text-decoration: line-through;">pay to win</span></li>
        </div>
    </div>
</div>

<div class="bg2">
    <div class="row">
        <div class="col-md-4">
            <h2>Example body text</h2>
            <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p><small>This line of text is meant to be treated as fine print.</small></p>
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
        </div>
        <div class="col-md-4">
            <h2>Example body text</h2>
            <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p><small>This line of text is meant to be treated as fine print.</small></p>
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
        </div>
        <div class="col-md-4">
            <h2>Example body text</h2>
            <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p><small>This line of text is meant to be treated as fine print.</small></p>
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
        </div>
    </div>
</div>

<div class="bg3">
    <div class="row">
    </div>
</div>

<div class="bg4">
    <div class="row">
    </div>
</div>

这是我的自定义css (不是引导)

.bg1 {
background-image: url(../images/bg1.jpg);
clear: both;
width: 100%;
height: 400px;
margin: 0 auto;
padding: 0px;
-webkit-box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
}
.bg2 {
background-color: #fffeee;
clear: both;
width: 100%;
height: 300px;
margin: 0 auto; 
padding: 0px;
}
.bg3 {
background-image: url(../images/bg3.jpg);
clear: both;
width: 100%;
height: 300px;
margin: 0 auto;
padding: 0px;
-webkit-box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
}
.bg4 {
background-color: #fffeee;
width: 100%;
height: 300px;
margin: 0 auto; 
padding: 0px;
}
.content-container {
margin-right: auto;
margin-left: auto;
padding: 45px;
}
@media (min-width: 768px) {
.content-container {
width: 750px;
}
}
@media (min-width: 992px) {
.content-container {
width: 970px;
}
}
@media (min-width: 1200px) {
.content-container {
width: 1170px;
}
}
.bg1-text1 {
font-size: 30px;
color: #FFF;
}
.bg1-text2 {
font-size: 20px;
color: #FFF;
padding-top: 15px;
padding-left: 40px;
list-style: none;
}

任何帮助都很感激。谢谢!

Answer 1

您可以在height:300px;上删除固定值.bg1 .bg2 .bg3 .bg4。

或者，如果需要固定值，可以添加overflow:auto;或overflow:hidden;。