引導欄上重疊的調整大小

Question

我工作的一些響應式設計，但我有與引導柱麻煩，因爲一切都完美地工作，直到我調整我的瀏覽器，我已經查了一些答案在這裏，如： Bootstrap grid columns overlapping each other Why do my bootstrap columns overlap? bootstrap columns overlapping

但沒有我的問題的工作，我希望你能幫助我:) 這就是我：

\t \t .lil-price{ 
 
\t \t  width: 40%; 
 
\t \t  margin-top: -15%; 
 
\t \t  z-index: 1; 
 
\t \t  border-radius: 50%; 
 
\t \t  text-align: center; 
 
\t \t  font-size: 1.5em; 
 
\t \t  padding: 14% 0; 
 
\t \t  line-height: 1; 
 
\t \t  position: absolute; 
 
\t \t  background: #111842; 
 
\t \t  color: white; 
 
\t \t } 
 

 
\t \t .lil-orange{ 
 
\t \t  width: 72%; 
 
\t \t  z-index: 0; 
 
\t \t  border-radius: 50%; 
 
\t \t  text-align: center; 
 
\t \t  font-size: 1.8em; 
 
\t \t  padding: 27% 0; 
 
\t \t  line-height: 30px; 
 
\t \t  position: absolute; 
 
\t \t  background: #faa21b; 
 
\t \t  color: white; 
 
\t \t  margin-left: 19%; 
 
\t \t  margin-top: 3%; 
 
\t \t 
 
\t \t } 
 

 
\t \t .lil-march-1{ 
 
\t \t \t position: absolute; 
 
\t \t \t margin-top: 50%; 
 
\t \t } 
 

 
\t \t .lil-march-1 img{ 
 
\t \t  width: 80%; 
 
\t \t  margin-left: 10%; 
 
\t \t } 
 

 
\t \t .lil-blue{ 
 
\t \t  width: 72%; 
 
\t \t  z-index: 0; 
 
\t \t  border-radius: 50%; 
 
\t \t  text-align: center; 
 
\t \t  font-size: 1.8em; 
 
\t \t  padding: 27% 0; 
 
\t \t  line-height: 30px; 
 
\t \t  position: absolute; 
 
\t \t  background: #00aae4; 
 
\t \t  color: white; 
 
\t \t  margin-left: 19%; 
 
\t \t  margin-top: 3%; 
 
\t \t 
 
\t \t } 
 

 
\t \t .lil-jeep{ 
 
\t \t \t position: absolute; 
 
\t \t \t margin-top: 50%; 
 
\t \t } 
 

 
\t \t .lil-jeep img{ 
 
\t \t  width: 80%; 
 
\t \t  margin-left: 10%; 
 
\t \t } 
 

 

 
\t \t .lil-green{ 
 
\t \t  width: 72%; 
 
\t \t  z-index: 0; 
 
\t \t  border-radius: 50%; 
 
\t \t  text-align: center; 
 
\t \t  font-size: 1.8em; 
 
\t \t  padding: 27% 0; 
 
\t \t  line-height: 30px; 
 
\t \t  position: absolute; 
 
\t \t  background: #4e9d2d; 
 
\t \t  color: white; 
 
\t \t  margin-left: 13%; 
 
\t \t  margin-top: 3%; 
 
\t \t 
 
\t \t } 
 

 
\t \t .lil-vento{ 
 
\t \t \t position: absolute; 
 
\t \t \t margin-top: 50%; 
 
\t \t } 
 

 
\t \t .lil-vento img{ 
 
\t \t  width: 80%; 
 
\t \t  margin-left: 10%; 
 
\t \t }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container lorem"> 
 
    <div> 
 
    \t <center><h2 class="blue-title title-mobil">Lorem</h2></center> 
 
    </div> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-4"> 
 
\t \t \t <div> 
 
\t \t  <div class="lil-price">consectetur adipiscing</div> 
 
\t \t \t <div class="lil-blue"> 
 
\t \t \t <p>Lorem ipsum dolor sit amet</p> 
 
\t \t  </div> 
 
\t \t  <div class="lil-jeep"> 
 
\t \t  \t <img src="http://placekitten.com/900/500"> 
 
\t \t  </div> \t 
 
     </div> 
 
\t \t </div> 
 
\t \t <div class="col-sm-4"> 
 
     <div class="row"> 
 
\t \t \t <div class="lil-price">consectetur adipiscing</div> 
 
\t \t \t <div class="lil-orange"> 
 
\t \t \t <p>Lorem ipsum dolor sit amet</p> 
 
\t \t  </div> 
 
\t \t  <div class="lil-march-1"> 
 
\t \t  \t <img src="http://placekitten.com/900/500"> 
 
\t \t  </div> 
 
     </div> 
 
\t \t </div> 
 
\t \t <div class="col-sm-4"> 
 
\t \t \t <div class="lil-price">consectetur adipiscing</div> 
 
\t \t \t  <div class="lil-green"> 
 
\t \t \t  <p>Lorem ipsum dolor sit amet</p> 
 
\t \t  </div> 
 
\t \t  <div class="lil-vento"> 
 
\t \t  \t <img src="http://placekitten.com/900/500"> 
 
\t \t  </div> \t 
 
\t \t </div> 
 
\t </div> \t 
 
</div>

https://codepen.io/phacohen/pen/RgPLjP

Answer 1

你必須從你的類中刪除position: absolute財產其停止重疊。

沒有position: absolute：

.rect { 
 
    width: 120px; 
 
    height: 120px; 
 
    border: 3px solid; 
 
    font-size: 40px; 
 
}

<div class="row"> 
 
    <div class="col-sm-4"><div class="rect">1</div></div> 
 
    <div class="col-sm-4"><div class="rect">2</div></div> 
 
    <div class="col-sm-4"><div class="rect">3</div></div> 
 
</div>

隨着position: absolute：

.rect { 
 
    width: 120px; 
 
    height: 120px; 
 
    border: 3px solid; 
 
    font-size: 40px; 
 

 
    position: absolute; 
 
}

<div class="row"> 
 
    <div class="col-sm-4"><div class="rect">1</div></div> 
 
    <div class="col-sm-4"><div class="rect">2</div></div> 
 
    <div class="col-sm-4"><div class="rect">3</div></div> 
 
</div>