為什么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; 如果確實需要固定值。