1

我有一个容器类的 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 上执行一个 foo 循环，那么每行应该显示 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>

但这会导致网格视图系统崩溃。那么我该怎么做呢？我的重点是跨度标签。我想显示具有适当类的对象。

正确的形式（这就是我想要的）：

正确的形式

不正确的形式（这是现在的样子）：

表格不正确

** 更新 ** 正确代码（为了更好的实践）：

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

0 回答 0