twitter-bootstrap - 如何使用 for 循环使用 bootstrap 2 在每行中创建四列

Question

我看到有人问过类似的问题，但所有这些都指的是 Django 和其他我不熟悉的模板系统。但基本上我有数据被拉入，我想使用 for 循环在一行中创建四列并重复。然而，下面的代码有效，在控制台中它显示我只是一个接一个地创建一堆'span3'。在大多数情况下，它们最终连续四张图片，但有时它们不清晰，或者两张图片会在一行中，等等。我怎样才能清理我的代码，以便只有四张图片“span3”进入一行然后四个循环重复？我希望代码很清楚我正在使用 Jade 。

block body
-var    maxCols = 12;
-var    col = 3;

div(ng-controller='ImgCtrl')
    div(id="wrap")
        div(id="header")
            img(src="stumblr-logo.png", height="60px")
        div(id="main_full")
            div.container
                div.row
                    -for (var i = 0; i < (media.length / col); i++)
                            div(class="span3", id="id")
                                p
                                    a(href="/single?id=#{media[i].image_id}&img=#{media[i].image}")
                                        img(src="#{media[i].image}")

Answer 1

这对我有用(将 Jade 与 Bootstrap 脚手架一起使用)

- var cols = 6, elementsInRow = 12/cols
- each _, x in myPosts
    - if ((x % elementsInRow == 0))
         div(class='row-fluid')
             - each post, y in myPosts.slice(x, x+elementsInRow)
                 include ../includes/post