如何在同一个块中显示内联元素的Bootstrap网格视图？

Question

I am using bootstrap "list grid products view" sample and grid elements are displayed fine when description and picture height is the same.

Working sample: https://codepen.io/ajaypatelaj/pen/zIBjJ

Problem comes in when description, price and picture are of different height and do not display elements in line:

https://codepen.io/getkitchendeal/pen/gRgGeG

i tried to fix with=>

display: inline-block;
vertical-align: top;

Answer 1

There is a way to fix this, but it's ugly. It's called the clearfix hack. Check out this thread What does the clearfix class do in css?

Answer 2

What I would do here is fix min-height for each block for grid system.

Create a new css rule:

.list-group-item .thumbnail {
    min-height: inherit;
}

And add another one in .thumbnail

.thumbnail {
    margin-bottom: 20px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    min-height: 400px; #new rule
}