在三列 twitter bootstrap 中显示字段

Question

我有一个像下面这样的数组

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

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

{% 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 代码中，我可以根据 length of array 生成 checkbox, input field，例如我的列表/数组中有 50 个 us 状态，所以 50 个 p elements 带有复选框、跨度、输入元素生成成功

但问题是所有字段都在一个页面中逐行生成， 但我想要的是我想将它们分成three columns（比如 20、15、15 等等），这样 UI 看起来不错吧？

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

Answer 1

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

根据您的模板引擎（twig？下划线？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>

在我的例子中，使用引导程序你应该使用 span4 而不是 column 类

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