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

Question

我正在使用bootstrap“列表网格产品视图”样本，并且当描述和图片高度相同时，网格元素显示正常。

工作样本： https://codepen.io/ajaypatelaj/pen/zIBjJ ： https://codepen.io/ajaypatelaj/pen/zIBjJ

当描述，价格和图片具有不同的高度并且不显示元素时，问题就出现了：

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

我试着修复=>

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

Answer 1

有办法解决这个问题，但这很丑陋。 它被称为clearfix hack。 看看这个线程clearfix类在css中做了什么？

Answer 2

我在这里要做的是为网格系统修复每个块的最小高度。

创建一个新的css规则：

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

并在.thumbnail中添加另一个

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