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代码中，我可以根据checkbox, input field生成length of array，我的意思是例如我在列表/数组中有50个us状态，所以50 {{1} } with checkbox，span，输入元素成功生成

但问题是所有字段都是逐行生成的，但我想要的是我想将它们分成p elements（如20,15,15那样），以便UI看起来不错？

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

Answer 1

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

取决于您的模板引擎（twig？underscore？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>

使用bootstrap你应该使用span4而不是我的column类

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

在三列twitter bootstrap中显示字段

1 个答案: