25

現在、記事内のすべての記事に対して、クラス span4 の新しい div が作成されます。代わりに、各行のコンテンツを 3 つのスパンに制限し、その制限に達したら新しい行を作成したいと思います。どうすればこれを最もよく実装できますか?

{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
  <legend></legend>
  <div class="row-fluid" id="main">
      {% for article in articles %}
      <div class="span4">
          <div class="thumbnail">
              <a href="{{ article.url }}"><img src="http://placehold.it/300x150/483CB4"></a>
              <div class="caption">
                  <h4><a href="{{ article.url }}">{{ article.title }}</a></h4>
                  <p> {{ article.summary }}</p>
              </div>
              <legend></legend>
              <a class="btn" href="#"><i class="icon-thumbs-up"></i></a>
              <a class="btn" href="#"><i class="icon-thumbs-down"></i></a>
          </div>
      </div>
      {% endfor %}
  </div>
</div>
{% endblock %}

ゴール：

<div class="row">
  <div class="span4">article[0]</div>
  <div class="span4">article[1]</div>
  <div class="span4">article[2]</div>
</div>
<div class="row">
  <div class="span4">article[3]</div>
  <div class="span4">article[4]</div>
  <div class="span4">article[5]</div>
</div>
4

2 に答える 2

44

これを行う最善の方法は、組み込みのbatchフィルターを使用して、リストを 3 つのグループに分割することです。

{% for article_row in articles | batch(3, '&nbsp;') %}
<div class="row">
    {% for article in article_row %}
    <div class="span4">{{ article }}</div>
    {% endfor %}
</div>
{% endfor %}
于 2013-07-23T01:05:11.703 に答える
6

ループ内でloop.index0andを使用できます。for-loop のドキュメントは次のとおりです。loop.lastfor

例：

{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
  <legend></legend>
  <div class="row-fluid" id="main">
      {% for article in articles %}
      {% if loop.index0 % 3 == 0 %}
      <div class="row">
      {% endif %}
          <div class="span4">
              ...
          </div>
      {% if loop.index0 % 3 == 2 or loop.last %}
      </div>
      {% endif %}
      {% endfor %}
  </div>
</div>
{% endblock %}

loop.last項目が 3 つ未満の場合でも、句は最後の行を閉じる必要があります。<div>剰余が 0 のときに開始loop.index0し、剰余が 2 のときに終了する必要があります。

もう 1 つの方法は、項目をテンプレートに渡す前に行にグループ化することです。その後、2 つの for ループを 1 つずつ別の内部に発行することができます。

于 2013-07-23T00:34:54.937 に答える