如何在octobercms的bootstrap网格中显示结果？

Question

我现在在我的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 %}

这样做的任何直接的方式？

Answer 1

用它做完了

{% 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 %}

Answer 2

为了能够动态地执行此操作，您需要在需要启动和关闭新行时保持跟踪。这可以通过使用类似的东西在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