html - Bootstrap-元素在超小尺寸上重叠

Question

我有一个 recent-posts div，它显示了两个带有图片和文字的帖子。在 recent-posts 之后，我有另一个包含图像和一些文本的 div contact-us。我的问题以超小尺寸显示，其中 recent-posts 帖子位于 contact-us 部分。我该如何解决？以下是我的代码和JsFiddle。

HTML:

<div id="recent-posts" class="center-block row">
            <div class="posts col-md-3 col-sm-5 col-xs-9">
                    <div class="posts-div">
                        <div class="img-hover">
                            <img src="images/post1.jpg" class="img-responsive">
                            <div class="overlay col-md-12 col-xs-12">
                                <div>
                                    <span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart"></span></span>
                                    <span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
                                </div>
                                <div>
                                    <span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye"></span></span>
                                    <span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
                                </div>
                            </div>
                        </div>
                     <p class="text-center">dsfdsfsdfldshfdskfhdsf</div>
            </div>
            <div class="posts col-md-3 col-sm-5 col-xs-9">
                    <div class="posts-div">
                        <div class="img-hover">
                            <img src="images/post2.jpg" class="img-responsive">
                            <div class="overlay col-md-12 col-xs-12">
                                <div>
                                    <span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart "></span></span>
                                    <span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
                                </div>
                                <div>
                                    <span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye "></span></span>
                                    <span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
                                </div>
                            </div>
                        </div>
                    <p class="text-center">dsjkfhjdssafjsdkjhfdsf</p>
                </div>
            </div>
        </div>
<div id="contact-us" class="row">
            <div class="col-md-12 col-xs-12">
                <img src="http://www.infocurse.com/wp-content/uploads/2014/11/716988156_1368083660.png" class="img-responsive">
                <div id="contact-us-text">
                    <p>sdkf,sd,kfnds,nf,d.....</p>
                    <p>kdsfnks,dnf,ksdnf,kdsnf,kdsnf,d</p>
                    <button class="btn btn-success pull-left">124234234</button>
                </div>
            </div>
        </div>

CSS:

#recent-posts{
    height: 350px;
    display: flex;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    margin-bottom: 100px;
}
.posts{
    display: flex;
    flex-direction: column;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    padding: 0;
    margin-left: 20px;
    margin-right: 20px;
}
.posts img{
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.posts .btn-success{
    position: absolute;
    background-color: #01a89e;
    width: 50%;
    color: #101010;
    cursor: auto;
    margin-top: -17px;
    margin-right: 25%;
}
.posts .btn-success:active{
    background-color: #01a89e;
    color: #101010;
    box-shadow: none;
}
.posts p{
    margin-top: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(46, 183, 175, .7);
    overflow: hidden;
    height:0;
    transition: .8s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
    margin-left: 15px;
}
.posts-div:hover .overlay {
    bottom: 0;
    top: 0;
    height: auto;
    overflow: hidden;
}
.img-hover{
    position: relative;
}
.post-icon{
    color: rgba(255, 255, 255, 1);
    transform: rotate(45deg);
    opacity: 1;
}
.post-icon span{
    transform: rotate(-45deg);
    font-size: 12px;
    position: absolute;
    left: 50%;
    top: 0.6em;
    margin-left: -7px;
    color: #101010;
    font-weight: bold;
}
.fa-heart{
    color: red !important;
}
#contact-us{
    height: 200px;
    margin-bottom: 30px;
    box-shadow: 0 1px  5px #666666, 0 -1px  5px #666666;
    position: relative;
    padding: 0;
    overflow: hidden;
}
#contact-us-text{
    position: absolute;
    top: 20%;
    left: 12%;
}
#contact-us-text p{
    color: white;
}
#contact-us-text .btn-success{
    background-color: #01a89e;
    cursor: auto;
}
#contact-us-text .btn-success:active{
    background-color: #01a89e;
    box-shadow: none;
}

JsFiddle

Answer 1

Recent-posts 类具有固定的高度。

#recent-posts{
  height: 350px; // THIS LINE IS THE REASON!
  display: flex;
  justify-content: center;
  position: relative;
  flex-wrap: wrap;
  margin-bottom: 100px;
}

Updated fiddle