How can I display results in bootstrap grid in octobercms?

问题

I have this right now in my octobercms code to display results. It currently displays it in a list but I want it in bootstrap grid of 3 equal columns.

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

Any straight forward way of doing this?

回答1:

Got it done using this

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

回答2:

To be able to do this dynamically you would need to hold track when you need to start and close a new row. This can be done in twig by using something like this,

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

来源：https://stackoverflow.com/questions/55047174/how-can-i-display-results-in-bootstrap-grid-in-octobercms