可扩展面板在平板电脑设备上向下推动​​列

Question

我在平板电脑设备上遇到布局问题。

目前正在建立一个视频托管网站 - 每行包含4个部分，在我使用col-sm-6的平板电脑设备上 - 然后在一行中显示2个项目。

每个项目底部都有一个可展开的面板。

在平板电脑设备上，当我展开左侧的第一个项目时，它会向下推下面的列。

我想知道是否有任何阻止这种情况？

请看下面的截图：

Codepen：http://codepen.io/shane309/pen/wWWjBM

代码如下：

<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Animated Videos</h1>
</div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="hovereffect" onclick="void(0)">
                <img src="images/animated-video-1.jpg" alt="Animated Video 1 Preview" class="img-responsive videoThumbnail" />
                <div class="overlay">
                   <h2>Animated Video #1</h2>
                   <a class="info" href="animated-video-2.html">WATCH NOW</a>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
            <h3 class="videoTitle">LMS Explainer</h3>
            <p class="featuredText">Quisque rhoncus, nunc ac rhoncus pellentesque. </p>
            <p class="read-more"><a data-toggle="collapse" data-target="#animated-video-1" class="collapsed">Read More</a></p>
            <div id="animated-video-1" class="collapse">
            <p class="expandedText">Praesent quis erat non leo pulvinar luctus. Etiam vitae enim blandit, aliquam eros ut, euismod libero.</p>
            </div>   
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="hovereffect" onclick="void(0)">
                <img src="images/animated-video-2.jpg" alt="Animated Video 1 Preview" class="img-responsive videoThumbnail" />
                <div class="overlay">
                   <h2>Animated Video #2</h2>
                   <a class="info" href="animated-video-3.html">WATCH NOW</a>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
            <h3 class="videoTitle">Positive Psychology #1</h3>
            <p class="featuredText">Donec id odio nulla. Vivamus pretium sagittis sem in elementum.</p>
            <p class="read-more"><a data-toggle="collapse" data-target="#animated-video-2" class="collapsed">Read More</a></p>
            <div id="animated-video-2" class="collapse">
            <p class="expandedText">Sed gravida magna sit amet mollis bibendum. Praesent vel augue ornare, rutrum augue eget, laoreet libero. Etiam vitae magna lectus.</p>
            </div>     
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="hovereffect" onclick="void(0)">
                <img src="images/animated-video-3.jpg" alt="Animated Video 1 Preview" class="img-responsive videoThumbnail" />
                <div class="overlay">
                   <h2>Animated Video #3</h2>
                   <a class="info" href="animated-video-4.html">WATCH NOW</a>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
            <h3 class="videoTitle">Positive Psychology #2</h3>
            <p class="featuredText">Morbi aliquet quam sed enim dictum, eu ultricies dui cursus.</p>
            <p class="read-more"><a data-toggle="collapse" data-target="#animated-video-3" class="collapsed">Read More</a></p>
            <div id="animated-video-3" class="collapse">
            <p class="expandedText">Duis a augue ac felis semper ultrices at quis mauris. Morbi id velit eu lacus fermentum efficitur non eget lacus. Proin volutpat est et quam congue hendrerit.</p>
            </div>   
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="hovereffect" onclick="void(0)">
                <img src="images/animated-video-4.jpg" alt="Animated Video 1 Preview" class="img-responsive videoThumbnail" />
                <div class="overlay">
                   <h2>Animated Video #4</h2>
                   <a class="info" href="animated-video-5.html">WATCH NOW</a>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
            <h3 class="videoTitle">Interactive Video Explainer</h3>
            <p class="featuredText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <p class="read-more"><a data-toggle="collapse" data-target="#animated-video-4" class="collapsed">Read More</a></p>
            <div id="animated-video-4" class="collapse">
            <p class="expandedText">Phasellus luctus tortor ut quam volutpat condimentum. Nunc nec felis finibus, pharetra lacus a, aliquam ante.</p>
            </div>
        </div>
    </div>  
</div>

Answer 1

在你的第二个div（心理学一个）之后加上这一行：

 <div class="clearfix"></div>

在任何阻止连续div正确排队的div之后添加更多clearfix div。

Answer 2

错误是由于第一部分的高度高于第二部分。您必须将该部分的最大高度设置为其他部分的高度。

选项1： 使用css

将min-height设置为该部分

section { min-height: 300px } //set height depending upon ur need

选项2：将jquery用于动态内容

 var maxheight;
    $('section').each(function(){
    var currHeight = $(this).height();
    if(maxHeight < currHeight) {
    maxHeight = currHeight;
    }
    });
    if(window.width() < 768) {
    $('section').height(maxHeight);
    }