使用Twig循环变量创建特定的Bootstrap 4列块

时间:2019-01-31 13:20:11

标签: for-loop bootstrap-4 twig

我正在尝试创建一个包含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块。

0 个答案:

没有答案