我在图片上遇到块定位问题。 image 当我编写类col-sm-6引导程序时会发生这种情况。我试图添加类clearfix，但不是结果。
<div class="container">
<div class="row">
<div class="card-row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 clearfix">
<div class="card ">
<a href="#"><img src="images/layer-5.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-8.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-8.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 clearfix">
<div class="card ">
<a href="#"><img src="images/layer-6.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-7.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-7.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mod-col-3">
<div class="card ">
<a href="#"><img src="images/layer-7.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-5.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-8.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mod-col-4">
<div class="card ">
<a href="#"><img src="images/layer-8.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-6.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-7.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
我想成为3个街区的空位和3个区块的4个位置？