djangoのfor文とbootstrapのcolの組み合わせについて

Question

djangoのfor文とbootstrapのcolの組み合わせについて
ブロックの配置を以下のように横並びで下にたまるように配置したいのですが、
新しい投稿→→→→→
→→→→→→→→→→
→→→→→→古い投稿

画像のように縦並びにしかならないです。

ご教示いただけますと幸いです。

各バージョンは以下になります。
・django 4.0.2
・bootstrap v5.1.3
・html5

<div class="col-lg-3 col-sm-4 border ">
            {% for diary in diary_list %}
                <span class="post-preview shadow">
                    <a href="{% url 'diary:diary_detail' diary.pk %}">
                        {% if diary.photo1 %}
                            <img src="{{ diary.photo1.url }}" class="img-fluid" />
                        {% endif %}
                    </a>
                    <p class="post-meta">{{ diary.created_at }}</p>
                </span>
                {% empty %}
            <p>日記がありません。</p>
            {% endfor %}
</div>

Comments

[Lhankor_Mhy]

for の中に col を入れるのが一般的なように思います。
どのようなコードを書くと「ブロックのサイズがどんどん小さく」なりますか？

[deango]

＞どのようなコードを書くと「ブロックのサイズがどんどん小さく」なりますか？
forのなかにrowとcolを入れてしまうとなります。

＞for の中に col を入れるのが一般的なように思います。
ありがとうございます。
複数のrowで分割して、その中でcolを横並びさせますでしょうか。

[Lhankor_Mhy]

回答します。

Answer 1

こういう感じでしょうか。

  <div class="col-lg-3 col-sm-4 border row">
    {% for diary in diary_list %}
    <span class="post-preview shadow col-4 d-block">

些末なことですみませんが、spanの中にpを入れるのは個人的には気持ちが悪いです。