如何在 octobercms 的引导网格中显示结果？答案

【问题标题】：How can I display results in bootstrap grid in octobercms?如何在 octobercms 的引导网格中显示结果？
【发布时间】：2019-07-29 12:56:35
【问题描述】：

我现在在我的 octobercms 代码中有这个来显示结果。它目前显示在一个列表中，但我希望它在 3 个相等列的引导网格中。

{% for cats in cats %}
  <div>
    <img src="{{ cats.poster.path }}"><br>
    <a href="{{ 'subcategory'|page({ slug: cats.slug }) }}">
      {{ cats.cat_title }}
    </a>
  </div>
{% else %}
  <div class="no-data">{{ noRecordsMessage }}</div>
{% endfor %}

有什么直接的方法吗？

【问题讨论】：

标签： php laravel bootstrap-4 twig octobercms

【解决方案1】：

为了能够动态地执行此操作，您需要在需要开始和关闭新行时保持跟踪。这可以在twig 中使用类似这样的东西来完成，

{% for i in 1 .. 10 %}
    {% if loop.index0 is divisible by(3) %}
        <div class="row">
    {% endif %}
    <div class=".col-md-4">{{ i }}</div>

    {% if loop.index is divisible by(3) or loop.last %}
        </div>
    {% endif %}    

{% endfor %}

demo

【讨论】：

【解决方案2】：

用这个搞定

{% for row in cats|batch(3) %}
<div class="row">
    {% for cats in row %}
        <div class="col-sm-4">
            <img src="{{ cats.poster.path }}"><br>
            <a href="{{ 'subcategory'|page({ slug: cats.slug }) }}">{{ cats.cat_title }}</a>
        </div>
    {% endfor %}
</div>
{% else %}
    <div class="no-data">{{ noRecordsMessage }}</div>
{% endfor %}

【讨论】：