Twitter bootstrap 如何使用for循环使用bootstrap2在每行中创建四列

我见过类似的问题，但所有这些都是指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}")

块体
-var-maxCols=12；
-var-col=3；
分区（ng控制器='ImgCtrl'）
div（id=“wrap”）
div（id=“header”）
img（src=“stumblr logo.png”，height=“60px”）
div（id=“main\u full”）
分区集装箱
分区行
-对于（变量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}”）

使用Jade中的each语句和javascript片段应该可以实现您想要的功能。我没有您的数据要测试，但我相信您这样重写的代码应该可以做到这一点

block body

div(ng-controller='ImgCtrl')
    div(id="wrap")
        div(id="header")
            img(src="stumblr-logo.png", height="60px")
        div(id="main_full")
            div.container
                - each element, x in media
                    - if ((x % 4 == 0))
                        div.row
                            - each elementInRow, y in media.slice(x, x+4)
                                div(class="span3", id="id")
                                    p
                                        a(href="/single?id=#{media[x+y].image_id}&img=#{media[x+y].image}")
                                            img(src="#{media[x+y].image}")                                        

这对我很有用（使用jade和引导脚手架）

---

我可能应该提到，我使用了bootstraps“.controls行”来清除，但这要么不起任何作用，要么将每张图片放在自己的行中。

- 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