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

Question

我正在使用引导程序“列表网格产品视图”示例，当描述和图片高度相同时，网格元素可以正常显示。

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

描述、价格和图片高度不同且不对齐显示元素时出现问题：

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

我试图用 => 修复

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
}