重新调整大小时重叠的自举网格颜色

Question

当我调整大小时，我的主要部分与我的最新部分重叠。我不知道是什么原因造成的，我希望有人能够终结我的苦难。

.l-latest { 
\t margin-bottom: $theme-margin; 
\t margin-top: 0; 
\t height: 270px; 
} 


.latest-item { 
\t height: 270px; 
} 

.last-item h2 { 
\t line-height: 270px; 
} 


     <!-- LATEST --> 

     <section class="latest l-latest"> 

      <div class="container"> 
       <div class="row"> 
        <div class="col-md-4"> 
         <div class="latest-item"> 
          <a href=""><h2>READ OUR REVIEWS</h2></a> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div class="latest-item"> 
          <a href=""><h2>UPCOMING EVENTS</h2></a> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div class="latest-item"> 
          <a href=""><h2>LATEST PHOTOS</h2></a> 
         </div> 
        </div> 
       </div> 
      </div> 

     </section> 



     <!-- MAIN --> 

     <section class="main l-main"> 

      <div class="container"> 
       <div class="row"> 
        <div class="col-md-8"> 

         <h2>LATEST POTSTS</h2> 
         <hr> 

         <a href=""><img src="images/post1.jpg" alt=""></a> 
         <h2>What happend last friday</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in...read more <i class="fa fa"></i></p> 
         <ul class="author"> 
          <li><i class="fa fa"><a href="#">Vlad</a></i></li> 
          <li><time>August 13th, 2015</time></li> 
          <li><i class="fa fa"><a href="#">0 Comments</a></i></li> 
         </ul> 
        </div> 
         
        </div> 
        </div> 
       
      </div> 

     </section> 
    

Answer 1

这是因为.l-latest有270px的固定高度。在'智能手机/平板电脑模式'中，您的div被堆叠起来，这意味着它们的高度为3 * 270像素（= 810像素），但l最新只能覆盖270像素。

从.l-latest删除270px或添加媒体查询以设置高度：auto on .l-latest。