调整大小时引导网格列重叠

Question

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

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


.latest-item {
	height: 270px;
}

.last-item h2 {
	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 的固定高度为 270 像素。在“智能手机/平板电脑模式”下，您的 div 被堆叠起来，这意味着它们的高度为 3*270px (=810px)，但 l-latest 仅覆盖 270px。

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