Bootstrap 调整大小时网格列重叠

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 的固定高度为 270px。在 'smartphone/tablet mode' 中，您的 div 被堆叠起来，这意味着它们的高度为 3*270px (=810px)，但 l-latest 仅覆盖 270px。

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

Bootstrap 调整大小时网格列重叠

Bootstrap grid coloumns overlaping when resized

twitter-bootstrap

grid

overlap

overlapping