Question

我遇到了Jade和Bootstrap的问题。我试图以这种格式布局一些HTML：

<bootstrap row>
   <bootstrap col-sm-6>
   <bootstrap col-sm-6>
</bootstrap row>
<bootstrap row>
   <bootstrap col-sm-6>
   <bootstrap col-sm-6>
</bootstrap row>

等...

我需要在每个声明中发生这种情况但是我不能让它在我喜欢的方式下工作。它在每次迭代后不断关闭行，所以我得到：

<bootstrap row>
   <bootstrap col-sm-6>
</bootstrap row>
<bootstrap row>
   <bootstrap col-sm-6>
</bootstrap row>

这是我目前拥有的Jade模板：

div.col-sm-12
  #items
    - each item, x in items
      div.article.col-sm-6
        div.title
          h3= item.name + " (" + item.cost + ")"
          p= item.stats
          p= item.recipe
          p= item.ability
          p= "Purchased from " + item.category

因此，对于每2次迭代，我需要连续包装两个col-sm-6项。

任何帮助都将不胜感激。

谢谢。

Answer 1

一种方法是仅在索引为偶数时呈现item，并在该条件下呈现下一个项目。类似的东西：

.col-sm-12                   
  #items                     
    - var items = ['a', 'b', 'c', 'd'] 
    - each item, index in items
      if 0 === index % 2  
        .row                 
          - var nextItem = items[index + 1] 
          .col-sm-6= item                                                                                                                                  
          .col-sm-6= nextItem

输出：

<div class="col-sm-12">
  <div id="items">
    <div class="row">
      <div class="col-sm-6">a</div>
      <div class="col-sm-6">b</div>
    </div>
    <div class="row">
      <div class="col-sm-6">c</div>
      <div class="col-sm-6">d</div>
    </div>
  </div>
</div>

当然，由于您的item和nextItem并不像此示例那么简单，因此您可能需要使用partial来为每个值添加适当的标记。

如何延迟Jade模板中的结束标记？

1 个答案: