Freemarker：使用 bootstrap 在网格中显示数据

Question

我在 freemarker 中有一个包含照片路径的列表，我需要在 HTML 页面中显示照片。我像那样迭代我的列表

<#if photos?has_content>
    <#list photos as photo>
        <img src=${photo}
    </#list>
</#if>

我还有 HTML 页面使用 bootstrap 类在网格中显示这些照片（3 列）

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <div class="photo"></div>
        </div>
        <div class="col-lg-4">
            <div class="photo"></div>
        </div>
        <div class="col-lg-4">
            <div class="photo"></div>
        </div>
    </div>
    <div class="row">
        ...
    </div>
</div>

行数取决于照片的数量，但无法预测。我不知道如何在第一张和第三张照片之后为行添加开始和结束 div。

希望有人能帮我解决这个问题。谢谢！

Answer 1

你可以使用 ?chunk (http://freemarker.org/docs/ref_builtins_sequence.html#ref_builtin_chunk):

<div class="container">
  <#list photos?chunk(3) as row>
    <div class="row">
      <#list row as photo>
        <div class="col-lg-4">
          <div class="photo"><img src="${photo}"></div>
        </div>        
      </#list>
    </div>
  <#else>
    <div class="something">No photos</div>
  </#list>
</div>

Freemarker：使用 bootstrap 在网格中显示数据

Freemarker: Display data in grid using bootstrap

html

freemarker

twitter-bootstrap