html - Bootstrap 列在调整大小时重叠

Question

我正在做一些响应式设计，但我在 Bootstrap 中遇到了列问题，因为在我调整浏览器大小之前一切正常，我已经在这里检查了一些答案，例如: Bootstrap grid columns overlapping each other Why do my bootstrap columns overlap? bootstrap columns overlapping

但这些都不能解决我的问题，我希望你能帮助我 :) 这就是我所拥有的:

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

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

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

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

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

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

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


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

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

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

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