Question

我见过类似的问题，但所有这些问题都指的是我不熟悉的Django和其他模板系统。但基本上我有数据被拉入，我想使用for循环在一行内创建四列并重复。然而，下面的代码可以在控制台中显示我只是一个接一个地创建了一堆'span3'。在大多数情况下，他们最终连续四张图片，但偶尔他们不会清除或连续两张图片，等等。我如何清理我的代码，以便只有四张图片'span3'连成一排然后四个循环重复？我希望代码清楚我正在使用玉。

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 with bootstrap scaffolding）

- 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

Answer 2

使用Jade中的每个语句结合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}")

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

2 个答案: