我正在尝试创建一个包含5个帖子的html块。是一个Bootstrap 4 html块,其中col-md-3与col-md-12排成两列,而第三个在col-md-6排在中间,而最后2个在col-md处-3与col-md-12。我使用的代码是这样的:
<div class="row">
<div class="row">
<div class="col-md-3">
<div class="col-md-12">
<!--Post1-->
</div>
<div class="col-md-12">
<!--Post2-->
</div>
</div>
</div>
<div class="col-md-6">
<!--Post3-->
</div>
<div class="row">
<div class="col-md-3">
<div class="col-md-12">
<!--Post4-->
</div>
<div class="col-md-12">
<!--Post5-->
</div>
</div>
</div>
</div>
因此,我尝试使用以下代码使用twig循环创建它:
<div class="row">
{% if loop.index0 == 0 or loop.index0 == 3 %}
<div class="col-lg-3">
<div class="row">
{% endif %}
{% if loop.index0 != 2 %}
<div class="col-lg-12">
{% else %}
<div class="col-lg-6">
{% endif %}
</div>
{% if loop.index % 2 == 0 or loop.last %}
</div>
</div>
{% endif %}
</div>
循环几乎是正确的。前两个“ col-md-12”,第三个“ col-md-6”和第四个“ col-md-12”都已创建,但是第五个“ col-md-12”项在“行”之外“ col-md-3。因此,我尝试找到一种更好的方法来使用树枝循环,或者使用其他方法来创建此特定的html块。