Malharhak Malharhak -4 years ago 144
CSS Question

Keeping items on their column in bootstrap grid system

I have some thumbnails in a grid, that are all of the same size, but when you hover one it grows in height.

What I would like is that my block grows, and the other under it go down. But what actually happens is the grid reorganizes everything dynamically each time.
Here is a gif showing what happens:
enter image description here

Instead of that, I would like for only the column hovered to move down, and not have items switching columns.

The markup is like that:

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


My CSS doesn't contain much, only classes displaying the content and fixing the height of the tiles and changing it on hover.

What would be a good approach to have each of my columns separated so that items don't switch from one to another?

Answer Source

You need to nest another row inside of each column. Then any resizing happens within the column itself on mouse over rather then across all blocks in the same row.

Something like this:

 <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 example: http://www.bootply.com/Ih5cdXzn2B

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download