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

Question

我正在使用bootstrap“list grid products view”样本，当描述和图片高度相同时，网格元素显示正常。

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

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

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

我试图修复=＆gt;

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

Answer 1

有一种方法可以解决这个问题，但这很丑陋。它被称为clearfix hack。 看看这个帖子What does the clearfix class do in 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
}