Question

我的Meteor应用程序使用Skeleton框架。在一个页面上，它将在div表中显示MongoDB数据库中的文档列表。现在，我的模板中有以下代码。

<div class="row">
    {{#each plans}}
    <div class="four columns plan">
        <h3>{{plan_name}}</h3>
        <p>{{description}}</p>
        <div class="price">{{price}} for {{days}} days</div>
        <a class="button button-primary buy-plan" id="{{_id}}" rel="{{plan_name}}">Buy Now</a>
    </div>
    {{/each}}
</div>

但上面的代码将所有内容放在一行中，我无法弄清楚如何重现下面的HTML，每行只有三个项目。我怎样才能达到这个效果？

<div class="row">
    <div class="four columns plan">
        ...
    </div>
    <div class="four columns plan">
        ...
    </div>
    <div class="four columns plan">
        ...
    </div>
</div>
<div class="row">
    <div class="four columns plan">
        ...
    </div>
    <div class="four columns plan">
        ...
    </div>
    <div class="four columns plan">
        ...
    </div>
</div>
...

Answer 1

我不知道如何精确地做你想要的，但是你可以添加一些自举的1/3宽度列。我想知道，如果这不是你要去的地方，那么来自div课程。

<div class="row">
    {{#each plans}}
      <div class="four_columns_plan col-xs-4">
        <h3>{{plan_name}}</h3>
        <p>{{description}}</p>
        <div class="price">{{price}} for {{days}} days</div>
        <a class="button button-primary buy-plan" id="{{_id}}" rel="{{plan_name}}">Buy Now</a>
      </div>
    {{/each}}
</div>

这基本上会给你一个大行，有一堆堆叠的1/3宽度列。

如何遍历Meteor模板中的集合并且每行只显示三个项目？

1 个答案: