次のようなコンテナー クラスを持つ div 要素があります。
<div class="container">
<div class="col-lg-4 col-sm-4">
<a href=""><h3></h3></a>
<p></p>
<span class="label {% cycle 'label-success' 'label-primary' 'label-info' %}"></span>
</div>
</div>
私のコードからわかるように、内側の div で foor ループを実行すると、各行に 3 つの項目が表示されます。また、span タグには、オブジェクトごとに異なるクラス属性が必要です。
次のようになります。
<div class="container">
{% for source_code in all_source_codes %}
<div class="col-lg-4 col-sm-4">
<a href=""><h3>{{ source_code.program_title }}</h3></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, dolor officia esse, voluptas harum numquam corporis dolorem! Voluptatem inventore, atque in dolores velit, totam, assumenda dolorum cupiditate esse corporis aspernatur!</p>
<span class="label {% cycle 'label-success' 'label-primary' 'label-info' %}">{{ source_code.programming_language }}</span>
</div>
{% endfor %}
</div>
しかし、これによりグリッド ビュー システムがクラッシュします。どうすればそれができますか?ここでの私の焦点は、span タグです。オブジェクトを適切なクラスで表示したい。
正しいフォーム (これが私がなりたいものです) :
間違ったフォーム (これが現在のフォームです):
**更新** 正しいコード(より良い練習のために):
{% for sc in all_source_codes %}
{% if forloop.first or forloop.counter|add:"-1"|divisibleby:3 %}<div class="container">{% endif %}
<div class="col-lg-4 col-sm-4">
<hr style="border: 1px dotted black;">
<a href="{% url 'detail' sc.pk %}"><h4>{{ sc.program_title }}</h4></a>
<p>{{ sc.description }}</p>
<span class="label {% cycle 'label-success' 'label-primary' 'label-info' %}">{{ sc.programming_language }}</span>
</div>
{% if forloop.counter|divisibleby:3 or forloop.last %}</div>{% endif %}
{% endfor %}