python - 使用 for 循环在 django 模板中显示值

Question

如果我使用“for循环”，来自Db的所有数据都会垂直呈现。为了透明起见，我编写了一个没有 HTML 的示例。第二个代码“my.html”是 HTML 代码。我想要水平显示的分区(或表格)。如果我运行 my.html，我会垂直显示两个分区，如何水平放置它们？我想水平显示两个相邻的分区(或表格)，并且像 post.prop_one 这样的值必须垂直显示在分区或表格中。

{% for post in posts %}
    {{post.option_one}}
    {{post.option_two}}
{% endfor %}

my.html

<!-- myprices --> 
        <div id="pricing" class="container-fluid">   
    <div class="text-center">
                <h2>Pricing</h2>
                  <h4>blabla</h4>   
</div> {% for post in posts %}
                <div class="row slideanim-'inline'">
                <div class="col-sm-4 col-xs-12">

                  <div class="panel panel-default text-center">
                    <div class="panel-heading">

                  <h1><a href="">{{ post.offer_option}}</a></h1>
                    </div>
                      <div class="panel-body">
                          <p><strong>20</strong> {{post.prop_one}}</p>
                          <p><strong>20</strong>{{post.prop_two}} </p>
                          <p><strong>20</strong>{{post.prop_three}}</p>
                      </div>
                       <div class="panel-footer">
                        <h3>{{ post.price}}</h3>
                        <h4>{{ post.period}}</h4>
                       </div>
                      <button class="btn btn-lg">Sign Up</button>
                    </div>
                  </div>
                </div>
                  {% endfor %}

Answer 1

你循环整个内容..你想要循环的是col-sm-4 col-xs-12。您的“for 循环”和结束标记在您的 html 中放置错误。这是一个例子

       <!-- Container (Pricing Section) -->
<div id="pricing" class="container-fluid">
  <div class="text-center">
    <h2>Pricing</h2>
      <h4>blabla</h4>
  </div>

    <div class="row slideanim-'inline'">
        {% for post in posts %}
    <div class="col-sm-4 col-xs-12">


      <div class="panel panel-default text-center">
        <div class="panel-heading">

      <h1><a href="">{{ post.offer_option}}</a></h1>
        </div>
          <div class="panel-body">
              <p><strong>20</strong> {{post.prop_one}}</p>
              <p><strong>20</strong>{{post.prop_two}} </p>
              <p><strong>20</strong>{{post.prop_three}}</p>
          </div>
           <div class="panel-footer">
            <h3>{{ post.price}}</h3>
            <h4>{{ post.period}}</h4>
           </div>
          <button class="btn btn-lg">Sign Up</button>
        </div>

      </div>{% endfor %}
    </div>