Выравнивание Boostrap 'Thumbnail Grid System'

Question

Я пытаюсь выровнять все изображения одинаково, я прикрепил экранную запись того, как он выглядит в настоящее время. Я не знаю, почему он это делает, они все же размера, так как я использую Boostraps дизайн колонки (class="col-sm-4 col-md-3") ...

Here вы можете просматривать экран записи

EDIT:

Вот мой текущий код:

{% 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

Это происходит потому, что некоторые изображения больше, чем другие делая каждый Див разной высоты, что делает следующее изображение ДИВЫМ перейти к следующей строке , У вас есть два варианта:

1. Используйте счетчик, чтобы добавить перед каждым первым div этой строки и закрывающим div после четвертого.

2. Используйте matchHeight.js, чтобы каждый div этой строки был одинаковой высоты.