Question

当我调整大小时，我的主要部分与我的最新部分重叠。我不知道造成这种情况的原因，我希望有人终于可以结束我的痛苦了。

＆＃13;

.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>

＆＃13;

Answer 1

这是因为.l-latest的固定高度为270px。在智能手机/平板电脑模式下＆＃39;你的div正在堆积，这意味着它们的高度为3 * 270px（= 810px），但l-latest仅覆盖270px。

从.l-latest删除270px或添加媒体查询以设置身高：自动启动.l-latest。

调整大小时Bootstrap网格列重叠

1 个答案: