在shopify product-loop.liquid中迭代產品

Question

我在Shopify中借助片段product-loop.liquid顯示產品集合時遇到問題。 代碼基本上如下。

{% capture collection_handle %}{{ product-loop | handleize }}{% endcapture %}
{% capture url %}{% if collection_handle != "" %}/collections/{{ product-loop }}{{ product.url }}{% else %}{{ product.url }}{% endif %}{% endcapture %}
<div class="product span3 {% if template == 'collection' %}adaptive-grid{% endif %}">



</div>

{% unless template contains 'collection' %}
{% cycle 'clear-product-loop': '', '', '', '<div style="clear:both;"></div>' %}
{% endunless %}

結果是一行是2個項目或3個項目或4個項目（取決於屏幕分辨率），下一行始終是1個項目，並且該模式一直在重復。 怎么了？

編輯：一些相關的CSS

.row { margin: 0 0 30px 0; }
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { display: block; float: left; margin: 0 15px; }
.inner-left { margin-left: 0px !important; }
.inner-right { margin-right: 0px !important; }  


.span1 { width: 53px; }
.span2 { width: 136px; }
.span3 { width: 219px; }
.span4 { width: 302px; }

.span3.adaptive-grid {width: 219px;}
.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}

Answer 1

最后，我通過刪除以下行來解決了我的問題

.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}

來自Shopify樣式文件（最小主題）。 現在，可以以不同的分辨率顯示產品網格，而無需斷開線。