Html 在twitter引导中以三列显示字段

我有一个如下的数组

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 %}

{%用于美国各州%}

{{state.1}}

{%endfor%}

因此，从上面的html代码中，我可以根据数组的

长度生成
复选框，输入字段
，我的意思是，例如，我在列表/数组中有50个us状态，因此成功生成了50个
p元素
，带有复选框，span，输入元素

但问题是所有字段都是在一页中逐行生成的，
但是我想要的是我想把它们分成三列（比如20、15、15等等），这样UI看起来就不错了，对吗

所以我真的很困惑如何通过twitter引导实现这一点？
因此，有人能告诉我如何将列表中生成的50个p元素排列到这些列中吗？
您必须手动创建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>


{%for（i=1；i实际上，我正在使用django（Python）模板系统浏览从我的视图中获得的列表。我相信您可以检查在该模板引擎中实现的
for
循环有多简单。