>

모델 목록을 forloop를 사용하여 반복하는 행과 대의원으로 나누고 싶습니다.

내가 시도했다

{% if forloop.counter|divisibleby:4 %}

<div class="row m-3">
    <div class="col-12">
        <div class="row mt-3">
        {% for Collection in object_list %}
        {% if forloop.counter|divisibleby:4 %}
        <div class="row mt-3">
        {% endif %}
           <div class="col-6 col-sm-3">
               <div class="dark">
               <a>
                   <div style="background-image:url({{ Collection.img }})" class="Collection">
                       </div>
                       <h3 class="title-banner text-center">{{ Collection.Name }}</h3>
               </a>
            </div>
               </div>
{% if forloop.counter|divisibleby:4 %}
        </div>
        {% endif %}
{% endfor %}
            </div>
        </div>
</div>

내 poblem은 Django를 사용하여 Bootstrap에서 행당 span6의 축소판 2 개를 표시하는 방법 .

그러나 그 솔루션은 html 파일에서 group-by 변수를 변경할 수 없기 때문에 나에게 적합하지 않습니다. 모바일 장치에는 두 개의 열이 있고 컴퓨터에는 4 개의 열이 있으므로 변경할 수 있어야합니다. 누군가가 그 답변 (첫 번째 답변)을 편집하고 여기에 게시하여 화면에 따라 html 파일에서 해당 변수를 변경할 수 있습니까?

  • 답변 # 1

    jinja2에서 제공하는 slice () 필터를 사용할 수 있습니다 :

    코드 고려 :

    <div class="row m-3">
        <div class="col-12">
            <div class="row mt-3">
            {% for Collection in object_list|slice(4) %}
               <div class="col-6 col-sm-3 {{ loop.index }}">
                   {% for item in column %}
                   <div class="dark">
                   <a>
                       <div style="background-image:url({{ Collection.img }})" class="Collection"></div>
                       <h3 class="title-banner text-center">{{ Collection.Name }}</h3>
                   </a>
                </div>
                   {% endfor %}
                   </div>
            {% endfor %}
            </div>
        </div>
    </div>
    
    

    배치 필터를 통해 마지막 열의 누락 된 요소를 관리 할 수도 있습니다

  • 이전 flutter - 다른 클래스의 Iterator FOR 내부에서 변수 목록을 전달하는 방법은 무엇입니까?
  • 다음 python - "너무 일찍 이미지를 생성하지 못했습니다"라는 오류없이 tkinter를 사용하여 gif 파일을 어떻게 열 수 있습니까?