如何在3列中显示数据库中的值

时间:2018-11-28 23:54:19

标签: python html css django

enter image description here

世界您好,我需要您的帮助!

我试图找到如何在3列中显示数据。(如图片所示) 我在Django框架中工作。 现在我有1列。 我有:

index.html
{% block content %}


{% for post in posts %}

  {% include 'face/includes/post_card_template.html' %}

{% endfor %}

{% endblock %}

post_card_template.html

<h1 class='mb-5'> </h1>
   <div class="card mb-3" style="width:400px; border-radius: 8px; " >
   {% if post.image %}
       <img src="{{ post.image.thumbnail.400x400 }}" class="img-responsive"  style="border-radius: 8px;" alt="Card image" font-size:8px ;>
   {% endif %}
     <div class="card-body">
  <h4 class="card-title">{{ post.title }}</h4>
  <p class="card-text">{{ post.body1 }}</p>
  <p class="card-text">{{ post.body2 }}</p>
  <p class="card-text">{{ post.body3 }}</p>
  <p class="card-text">{{ post.body4 }}</p>
  <p class="card-text">{{ post.body5 }}</p>
  <a href="{{ post.get_absolute_url }}" class="btn btn-secondary">Read</a>
    </div>
 </div>

1 个答案:

答案 0 :(得分:0)

使用引导程序很容易

  <div class="row">
    <div class="col-xs-4 col-sm-4 col-lg-4" >.col-xs-4 .col-sm-4 .col-lg-4</div>
    <div class="col-xs-4 col-sm-4 col-lg-4" >.col-xs-4 .col-sm-4 .col-lg-4</div>
    <div class="col-xs-4 col-sm-4 col-lg-4" >.col-xs-4 .col-sm-4 .col-lg-4</div>
  </div>

查看全文:Bootstrap grid examples