2016-11-14 16 views
0

"for loop"を使用すると、Dbのすべてのデータが垂直に表示されます。私は透明性のために、HTMLのない例を書いた。 2番目のコード "my.html"はHTMLコードです。私は部門(またはテーブル)が水平に見せたいと思う。 my.htmlを実行すると、2つの部門が垂直に表示されますが、どのように水平に配置できますか?私は2つのディビジョン(またはテーブル)を横に並べて表示し、post.prop_oneの値はディビジョンまたはテーブルに垂直に表示する必要があります。あなたがループしたいdjangoテンプレートの値をディスパッチするためのforループの使用

{% 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 %} 
+0

他のテーブルに2つのテーブルを入れます。あるいは '' col-sm-4 col-xs-12 ''のような' bootstrap'クラスを使用してください – furas

+0

あなたの質問ははっきりしません。アイテムをテーブル内に水平に(つまり単一のテーブル行に)表示するか、2つのテーブル全体を横に並べて表示しますか? –

+0

また、サンプルコードではテーブルがまったく使用されないため、あなたの質問はさらに不明です。 –

答えて

0

あなたループ全体content..allは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> 
関連する問題