Question

我正在使用twig创建一个小型的响应式网站，以便在几个页面中列出阵列中的照片。对于前端，我使用bootstrap列出，以便为每个设备以整齐的行显示它们。

  {% if (index + 1) % 2 == 0 %}

如果移动设备上有2个，或者较大设备连续3个，我想要列出并开始新行。我的问题是基于这一行;

根据屏幕尺寸，如果视口是一定宽度，我希望能够将{{1}}更改为更高的值，以便连续显示更多产品。我无法想到这样做的解决方案。我知道我可以在屏幕调整大小时使用Ajax传递视口的宽度，但是我没有说明如何设置该值以自动更新我的twig if语句。

非常感谢任何帮助。

Answer 1

在纯粹的Twig中，不，不可能像@DarkBee在评论部分中解释的那样。但是，如果你将Twig和CSS合并在Twig中打印出一些虚假元素，那就相当容易了：

<div class="row-fluid">
    {% for photo in photos %}
        <div class="col-xs-6 col-sm-4">
            <!-- YOUR PHOTO GOES HERE -->
        </div>
        {% if (loop.index + 1) % 2 == 0 %}
            <div class="visible-xs"></div>
        {% endif %}
    {% endfor %}     
        </div>
</div>

通过查找visible-xs（official docs），这不过是：

@media (max-width: 767px) {
    /* ... */
    .visible-xs {
        display: block !important;
    }
    /* ... */
}

所以，我想，您可以创建自己的类，并根据您的需要进行调整。

希望这有帮助。

Answer 2

我看到你可能会使用的树枝special loop variables。但是，我不确定它是否会起作用。你能尝试一下吗？

<div class="row-fluid">
    {% for photo in photos %}
        <div class="col-xs-6 col-sm-4">
        {% if (loop.index + 1) % 2 == 0 %}
            </div>
            <div class="row-fluid">
        {% endif %}
    {% endfor %}     
        </div>
</div>

不保证它会起作用 - 但试试吧！

根据视口大小使用if / else和twig

2 个答案: