1
내 div가 겹치는 문제가 있습니다. 창 크기를 조정하면 블록 "bg2"가 열을 "bg3"과 겹칩니다. 이유를 알아낼 수없는 것 같습니다. 나는 divs 사이에 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>
여기
.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;
}
감사 어떤 도움 (부트 스트랩되지 않음) 내 사용자 지정 CSS입니다. 고맙습니다!