0

我有一个如下所示的数组

us_states = [('AL', 'Alabama'),('AK', 'Alaska'),('AZ', 'Arizona'),('AR', 'Arkansas')('CA', 'California'),('CO', 'Colorado'),('CT', 'Connecticut'),('DE', 'Delaware'),.... until 50 us states]

因此，基于此列表/数组，我正在生成 html 字段，p如下所示

{% for state in us_states %}
   <p>
     <input id="{{state.0}}" type="checkbox" name="{{state.0}}"/>   
     <span style="padding-left:5px;">{{state.1}}</span>
     <input id="id_{{state.1}}" type="text" name="{{state.0}}" value="0.0">
   </p>
{% endfor %}

所以从上面的 html 代码中，我可以生成checkbox, input field相应的length of array，我的意思是，例如我在列表/数组中有 50 个我们的状态，所以 50 个p elements带有复选框、跨度、输入元素的成功生成

但问题是所有字段都在单个页面中逐行生成，但我想要将它们分成three columns（如 20、15、15 之类），以便 UI 看起来不错，对吗？

所以我真的很困惑如何使用 twitter bootstrap 实现这一目标？那么任何人都可以告诉我，如何将从列表中生成的 50 p 元素排列到列中？

4

1 回答 1

0

您必须手动创建 3 个列 div 并创建三个循环，分别通过 1-20、21-35、36-50。

根据您的模板引擎（树枝？下划线？ejs？），它应该看起来像这样的算法：

<div class="column">
    {% for (i=1; i<20; i++) { %}
        <p>
          ...
          {{ states[i].0 }} - {{ states[i].1 }}
          ...
        </p>
    {% } %}
</div>
<div class="column">
    {% for (i=21; i<35; i++) { %}
        <p>
          ...
          {{ states[i].0 }} - {{ states[i].1 }}
          ...
        </p>
    {% } %}
</div>
<div class="column">
    {% for (i=36; i<50; i++) { %}
        <p>
          ...
          {{ states[i].0 }} - {{ states[i].1 }}
          ...
        </p>
    {% } %}
</div>

在我的情况下，使用引导程序你可能应该使用 aspan4而不是column类

或者，忍者可以将所有三个循环放入一个嵌套循环中，外部循环只是更改i迭代的值。

于 2013-11-19T11:48:42.567 回答