對齊Boostrap'縮略圖網格系統'

Question

我試圖將所有圖像均等地對齊，並附上了當前圖像的屏幕記錄。 我不確定為什么要這樣做，因為我使用的是Boostraps列設計（ class="col-sm-4 col-md-3" ），它們的大小都相同。

在這里您可以查看屏幕錄像

編輯：

這是我當前的代碼：

{% 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之后添加一個關閉的div。

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