Question

我有一个文章实体，我在控制器中创建了 findAll（）。

我使用 col-md-6 类在div中渲染每篇文章。

但是foreach 2篇文章我必须将这些div包装成一行div。

我怎么能用树枝做这个？

感谢。

编辑：

我尝试了你的代码（NHG）：

{% for article in articles %}
    {% if loop.index % 2 == 0 %}
        <div class="row"></div>
    {% endif %}
    <div class="col-md-6">
        <article class="well well-sm">
            <a href="#"><img src="{{ article.image }}" alt="{{ article.title }}" class="img-thumbnail"></a>
            <h2 class="h3 text-center"><a href="#">{{ article.title }}</a></h2>
            <div class="alert alert-success well-sm">
                {{ article.content|striptags|slice(0, 235) }}...
            </div>
            <a class="btn btn-default btn-sm pull-right" href="#">{{ article.comments|length }} Comments</a>
            <div class="btn-group btn-group-sm">
                {% for tag in article.tags %}
                    <a class="btn btn-default">{{ tag.name }}</a>
                {% endfor %}
            </div>
        </article>
    </div>
{% endfor %}

但它不起作用。

我希望有这样的东西：

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

Answer 1

<强>已更新：

正如@Maerlyn所说：

{% for row in articles|batch(2) %}
    <div class="row">
        {% for article in row %}
            <div class="col-md-6">
                // your content
            </div>
        {% endfor %}
    </div>
{% endfor %}

旧方式：

使用loop.index（doc：The loop variable），modulo（doc：Math operators）和if（doc：if statement ）

{% for article in articles %}
    {% if loop.index % 2 == 1 %}
        <div class="row">
    {% endif %}
    <div class="col-md-6">
        // your content
    </div>
    {% if (loop.index % 2 == 0 or loop.last) %}
        </div>
    {% endif %}
{% endfor %}

Answer 2

{% for row in articles|batch(2) %}
    <div class="row">
        {% for article in row %}
            <div class="col-md-6">
                // your content
             {% if loop.index is divisibleby(3) %}
                 </div>
             {% endif %}
        {% endfor %}
    </div>
{% endfor %}

Answer 3

我建议：

<div class="row">
{% for article in articles %}
{% if (loop.index0 % 2 == 0) and not loop.first %}
</div>
<div class="row">
{% endif %}
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    // your content
    </div>
{% endfor %}
</div>

如何处理twig视图和bootstrap 3行/列？

3 个答案: