html - Bootstrap 行 - 删除元素会导致该行无法正确填充

Question

我正在开发一个使用 bootstrap 的 shopify 主题..

我需要显示一个没有问题的图像列表，列表显示正常。

但是，我需要删除一个特定的列表项，并且在执行此操作时，我得到了不稳定的结果...这是一个示例:

假设“--”是图片，当我选择不显示特定图片时出现第三行。

我已经查看了 Bootstrap 文档，但我认为我遗漏了一些东西。

     -- -- -- --
     -- -- -- --
              --
     -- -- -- --
     -- -- -- --

---

<div class="row seminar-row-two">
  {% for product in collections.stone-sculpture-gallery.products %}
  {% if product != 'john' %}
    {% assign productID = product.id %}
    {% assign productTitle = product.title %}
  <div class="col-xs-12 col-md-3 col-sm-6 gallery-image">
    {% for image in product.images %}
        {%if forloop.index == 1%}
        <a href="../products/{{product.handle}}"><img src="{{ image.src | product_img_url: 'medium' }}"> </a> 
        <p> <a href="../products/{{product.handle}}">{{product.handle}} </a> </p>
        {%endif%}
    {% endfor %}
  </div>
  {% endif %}
  {% endfor %}

Answer 1

所有列都被输入到一行中，这似乎是问题所在。每 4 个元素有一个新行应该可以解决这个问题。