调整Boostrap'缩略图网格系统'

Question

我试图平等地对齐所有的图像，我附上了它目前看起来像什么的屏幕录制。我不知道为什么它这样做，他们都是一样的大小，因为我使用Boostraps柱设计（class="col-sm-4 col-md-3"）...

Here可以查看屏幕录制

编辑：

这里是我当前的代码：

{% extends 'navbar.html' %} 

{% block container %} 
<div class="row"> 
    {% for product in my_list %} 
    <div class="col-sm-4"> 
    <div class="thumbnail"> 
     <img src="{{ product[4] }}" alt="{{ product[1] }}"> 
     <div class="caption"> 
     <h3>{{ product[1] }}</h3> 
     <p>This is a test, this will have the price and category of the product</p> 
     <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
     </div> 
    </div> 
    </div> 
    {% endfor %} 
</div> 
{% endblock %} 

Answer 1

这是因为一些图像比其他制造较大每个div都不同的高度，这使得下一个图像DIV转到下一行。您有两种选择：

1. 使用计数器在该行的每个第一个div之前添加一个，在第四个之后添加一个结束div。

2. 使用matchHeight.js使该行的每个div具有相同的高度。