在引导网格系统中将项目保留在其列上

Question

我在网格中有一些缩略图，它们的大小都相同，但是当你悬停它时，它的高度会增长。

我想要的是我的块增长，而另一块在它下面。但实际发生的是网格每次动态重组所有内容。 这是一个显示发生了什么的gif：

而不是那样，我希望只有悬停的列向下移动，而没有项目切换列。

标记就是这样：

<!-- This happens in a loop for each item -->
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6 item-container">
    <!-- Content of the box -->
    <div class="ratio" style="background-image:url('image.jpg')"></div>
        <div class="item-title alphaband">
            <span> Title </h2>
        </div>
        <div class="item-desc alphaband">
            <span> 2014-05-11 </span>
        </div>
        <div class="category-icon category category-band">
            <span> Category </span>
        </div>
    </div>

我的CSS并不包含很多，只有类显示内容并修复图块的高度并在悬停时更改它。

将每个列分开以便项目不会从一个列切换到另一个列，这会是一个很好的方法吗？

Answer 1

您需要在每列内嵌另一行。然后，任何调整大小都发生在鼠标上的列本身内，而不是在同一行中的所有块上。

这样的事情：

 <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6 item-container">
        <div class="row">
            <div class="col-md-12 item">
                    <img src="//placehold.it/200x150/992233">
            </div>
            <div class="col-md-12 item">
                    <img src="//placehold.it/200x150/449955/FFF">
            </div>          
            </div>
     </div>

Bootply示例：http://www.bootply.com/Ih5cdXzn2B