Как сделать так, чтобы данные, поступающие из базы данных Django, отображались горизонтально

введите описание изображения здесь На этом изображении данные отображаются в вертикальном формате, но мне нужны данные в горизонтальном формате

{% block title %}Blog{% endblock title %}

{% block body %} 


<div class="container">
    <div class="row">


{% for post in posts%}


<div class="col-lg-3">


<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->

    <img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

</div>
</div>

</div>



<div class="post block">
    <h2 class="subtitle">{{post.title}}</h2>


    <small>Posted At {{post.date_added}}</small>



    <p>{{post.intro}}</p>


        <a href="{% url 'post_detail' post.slug %}">Read More</a>

</div>


{% endfor %}

{% endblock body %}

Здравствуйте, я новичок в Django Как я могу отобразить горизонтально данные из базы данных

?

Проблема была в том, что я заканчивал строку внутри цикла For Loop, чтобы создать новую строку, нужно поместить цикл For Loop снаружи

Проверьте этот код

{% extends 'base.html' %}

{% block title %}Blog{% endblock title %}

{% block body %} 


 <div class="container">
    <div class="row"> 


{% for post in posts%}


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


<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->

    <img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
    <div class="card-body">
      <h5 class="card-title">{{post.title}}</h5>
      {{post.date_added}}
      <p class="card-text">{{post.intro}}</p>
      <a href="{% url 'post_detail' post.slug %}" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

</div>





{% endfor %}
</div>

</div>

{% endblock body %}

Вернуться на верх