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

Question

我现在在我的 octobercms 代码中有这个来显示结果。它目前显示在一个列表中，但我希望它显示在 bootstrap 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

为了能够动态地执行此操作，您需要在需要开始和关闭新行时保持跟踪。这可以在 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

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

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

How can I display results in bootstrap grid in octobercms?

php

twig

laravel

octobercms

bootstrap-4