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样式文件（最小主题）。现在，产品网格可以显示不同的分辨率而不会破坏线条。

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

1 个答案: