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

Question

我正在研究使用bootstrap的shopify主题..

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

但是，我需要删除一个特定的列表项，当这样做时，我得到了不可思议的结果......这是一个例子：

假设＆＃34; - ＆＃34;是图像，当我选择不显示特定图像时出现第三行。

我已经查看过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

所有col都被输入一行，这似乎是个问题。每4个元素都有一个新行应该解决这个问题。