重新調整大小時重疊的自舉網格顏色

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。