如何使我的框水平对齐？

Question

这最终只是一个盒子。但是由于它具有“for”循环，因此它应该有3个水平对齐的框。<div class="album py-5 bg-light">    <div class="container">        {% for hobby in hobbies.all %}        <div class="row">            <div class="col-md-4">                <div class="card mb-4 shadow-sm">                    <img class="card-img-top" src="{{ hobby.image.url }}"/>                    <div class="card-body">                        <p class="card-text">{{ hobby.summary }}</p>                    </div>                </div>            </div>        </div>        {% endfor %}    </div></div>我一直有这个：我该怎么办？

Answer 1

在这里，您可以使用解决方案

<div class="album py-5 bg-light">

  <div class="container">

    <div class="row">

      {% for hobby in hobbies.all %}

      <div class="col-md-4">

        <div class="card mb-4 shadow-sm">

          <img class="card-img-top" src="{{ hobby.image.url }}" />

          <div class="card-body">

            <p class="card-text">{{ hobby.summary }}</p>

          </div>

        </div>

      </div>

    {% endfor %}

  </div>

</div>

你应该在圈子之外。class="row"

class="row"以表格格式创建行，这意味着循环中的每个项目将创建一行，然后在其中创建一列，即您在新行中看到每张卡片。

要水平获取卡片，所有卡片都应放在一行内。