如何在带有树枝的循环末尾添加按钮

Question

更新：我用一个有效的解决方案来回答我的问题。见下文。

我创建了一个显示帖子的循环。每两次迭代都会创建一个新的 row。

我的循环遍历此帖子列表。此数组中不考虑该按钮。但我的问题是我想在最后一列添加一个按钮。

在我后台的选项中，我提供了显示或不显示此按钮的可能性。所以有时我不需要用这个按钮添加最后一列。

此外，我需要在两列的每一列上添加 col-md-push-2，因为我使用 Bootstrap 网格（即使在按钮在后台处于活动状态时在按钮的列上）。

我写的这段代码运行良好。但是我不知道在哪里添加我的按钮。

<div class="group">
    <div class="row">
        {% for post in posts %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
            {% if buttonIsActive %}
            <div class="div-for-my-button">
                Button
            </div>
            {% endif %}
        </div>
{% if loop.index % 2 == 0 and not loop.last %}
    </div>
</div>
<div class="group">
    <div class="row">
{% endif %}
        {% endfor %}
    </div>
</div>

我不知道在哪里可以为我的按钮添加代码。我知道我实际上每一行都有我的按钮:-(

我尝试生成 html 的示例。

<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5 ">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
    </div>
</div>
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5 ">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
    </div>
</div>
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
    </div>
</div>

Answer 1

为了将按钮放置在正确的位置、打开的行内或打开新的行，您可以检查帖子中的项目数是否均匀。请注意，您需要进行两次测试，一次用于偶数，一次用于不均匀

<div class="group">
    <div class="row">
        {% for post in posts %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
            {% if loop.last and posts|length % 2 != 0 %}
            <div class="div-for-my-button">
                Button
            </div>
            {% endif %}
        </div>
{% if loop.index % 2 == 0 and not loop.last %}
    </div>
</div>
<div class="group">
    <div class="row">
{% endif %}
        {% endfor %}
    </div>
    {% if posts|length % 2 == 0 %}
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>        
        </div>
    </div>
    {% endif %}
</div>

demo

Answer 2

我用工作和使用 batch 的变体回答我的问题。

{% for row in posts|batch(2) %}
<div class="group">
    <div class="row">
        {% for item in row %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        {% endfor %}
        {% if btn_statut == true and loop.last and posts|length is not divisible by(2) %}
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% if btn_statut == true and loop.last and posts|length is divisible by(2) %}
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endfor %}

如何在带有树枝的循环末尾添加按钮

How to add button at the end of a loop with twig

wordpress

twig

twitter-bootstrap

timber