对齐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具有相同的高度。