为什么我的每个个人资料都返回自己的行而不是 3 行？

Question

所以，我有一个循环遍历我的用户配置文件并随机显示其中的一些。我应该为每一行返回 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 %}

Answer 1

您正在为每个配置文件创建一行。标记在 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 %}