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

我用一个可以工作并使用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 %}

Answer 2

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

<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

如何使用树枝

2 个答案: