时间戳

首页 > 解决方案 > 为什么我的每个配置文件都返回自己的行而不是 3 行？

python - 为什么我的每个配置文件都返回自己的行而不是 3 行？

问题描述

所以，我有一个 for 循环遍历我的用户配置文件并随机显示其中的一些。我应该为每行返回 3 个配置文件，但是我让每个配置文件都有自己的行。我在这里做错了什么>

{% for profile in random_profiles %}


  <div class="row">
    <div class="col-md-4">
      <div class="card mb-4 shadow-sm">
        <img src="{{  profile.photo.url  }}"  width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"  rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
              <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>


{% endfor %}

标签： pythonhtmlcssdjango

解决方案

对于每个配置文件，您正在创建一行。标签在 for 循环内。我想要么你必须使用 2 个循环，一个用于配置文件，另一个用于每行中的配置文件数量，或者保持一个计数，如果计数达到 4，则创建额外的行，然后重置计数。实现第二种方法的一种方法可以是 -

{% for profile in random_profiles %}
  {% if forloop.first or forloop.counter0 % 4 == 0 %} 
    <div class="row">
  {% endif %}
        <div class="col-md-4">
          <div class="card mb-4 shadow-sm">
            <img src="{{  profile.photo.url  }}"  width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"  rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
            <div class="card-body">
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                </div>
                <small class="text-muted">9 mins</small>
              </div>
            </div>
          </div>
        </div>

      </div>
  {% if forloop.first or forloop.counter0 % 4 == 0 %} 
    </div>
  {% endif %}
{% endfor %}

推荐阅读