Как я могу выровнять свои ящики по горизонтали?

Question

В конечном итоге это всего лишь одна коробка. Но так как он имеет 'for' l oop, он должен иметь 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

Здесь вы go с решением

<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" должны быть вне l oop.

class="row" создает строку в табличном формате это означает, что каждый элемент в al oop создаст строку, а затем столбец внутри, т.е. вы видите каждую карту в новом ряду.

Для горизонтального размещения карт все карты должны быть размещены в пределах одного ряда.