Question

我正在尝试运行从数据库检索数据并显示到页面

的代码

作为一张桌子。代码是

<div>
          <h3>{{search_results|length}} Search Results Found...</h3>
          <p class="lead small" style="background-color: yellow;">These below values were real when the crawling happened at the specific duration('crawled_at').Now these values may vary or may not.</p>

             {% for sr in search_results %}
              <div class="col-md-4 row-md-4" >
               <table  class="table table-bordered" id="grid">
                    <tr class="row-md-3"><td class="col-md-1" width="12%">Item : </td>
                         <td class="col-md-2"  width="12%"><a href='http://flipkart.com{{sr.url}}'>{{sr.name}}</a></td> 
                    </tr>
                      <tr class="row-md-4">
                      <td class="col-md-1" width="12%"> Price : </td>   <td class="col-md-2" width="12%">{{sr.price}}</td>
                      </tr>
                      <tr class="row-md-3"><td class="col-md-1" width="12%"> Crawled at : </td>
                         <td class="col-md-2"  width="12%"> {{sr.crawled_at.strftime('%Y,%b %d.')}}</td>
                      </tr>
                      <tr class="row-md-4"><td class="col-md-3" width="12%"> Rating : </td>

                         <td>{% if sr.rating%}{{sr.rating}}{% else %}-NA-{% endif %}</td>
                    </tr> 

                    </table>    
                    </div>


           {% endfor %}
           <p class="lead small" style="background-color: yellow;">If you are not happy with available results. you may <a href="/recrawl?search={{keyword}}">recrawl</a> now or later.</p> 
      </div>

这会在第一个表底部的表格中输出，如下所示

但我希望将所有表格显示为网格视图。

右侧空间必须由显示在旁边的表填充。

Answer 1

要将网页上的元素显示为网格视图，您可以使用现有的jquery插件之一作为魅力并具有漂亮的动画。你可以找到一个适合你需要的in this post或者只是搜索＆＃34; jquery插件网格＆＃34;。

Answer 2

整个页面分为12个网格。所以将所有表包装在一个12格的div中，然后在里面创建一个网格大小为4的表。然后，Bootstrap会自动为你做这些事情。试试这样，

<div id="gridwrapper" class="col-md-12"> // It will occupy the entire page
{% for sr in search_results %}
              <div class="col-md-4> // Each div will occupy one 3rd of page which will make 3 column layout
               <table  class="table table-bordered" id="grid">
                    <tr class="row-md-3"><td class="col-md-1" width="12%">Item : </td>
                         <td class="col-md-2"  width="12%"><a href='http://flipkart.com{{sr.url}}'>{{sr.name}}</a></td> 
                    </tr>
                      <tr class="row-md-4">
                      <td class="col-md-1" width="12%"> Price : </td>   <td class="col-md-2" width="12%">{{sr.price}}</td>
                      </tr>
                      <tr class="row-md-3"><td class="col-md-1" width="12%"> Crawled at : </td>
                         <td class="col-md-2"  width="12%"> {{sr.crawled_at.strftime('%Y,%b %d.')}}</td>
                      </tr>
                      <tr class="row-md-4"><td class="col-md-3" width="12%"> Rating : </td>

                         <td>{% if sr.rating%}{{sr.rating}}{% else %}-NA-{% endif %}</td>
                    </tr> 

                    </table>    
                    </div>


           {% endfor %}
</div>

您可以直接在表格中给出col-md-4并删除for循环中的div

如何在网格视图中显示表格？

2 个答案: