时间戳

首页 > 解决方案 > 如何在 django 模板中制作水平产品列表视图

html - 如何在 django 模板中制作水平产品列表视图

问题描述

如何在 django 模板中制作水平产品列表视图

您可以在这里查看我的产品列表图片，

1：https ://i.stack.imgur.com/b6ZBH.png

视图.py

class ProductView(ListView):
   model = Product
   queryset = Product.objects.all()
   fields = "__all__"
   template_name = "demoapp/product.html"

产品.html：

       {% for product in object_list %}
           <div class='row'>
               <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item men {{ col_class_set }}">
                   <!-- Block2 -->
                   <div class="block2">
                       <div class="block2-pic hov-img0">
                           <img src="{{ product.image.url }}" alt="IMG-PRODUCT">

                           <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                               Quick View
                           </a>
                       </div>

                       <div class="block2-txt flex-w flex-t p-t-14">
                           <div class="block2-txt-child1 flex-col-l ">
                               <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                   {{product.title}}
                               </a>

                               <span class="stext-105 cl3">
                                   ${{product.price}}
                               </span>
                           </div>

                           <div class="block2-txt-child2 flex-r p-t-3">
                               <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                   <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                   <img class="icon-heart2 dis-block trans-04 ab-t-l" src="{% static "images/icons/icon-heart-02.png" %}" alt="ICON">
                               </a>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       {% endfor %}

标签： htmldjangodjango-templates

解决方案

尝试这个。

That is not achieve by django. Try changing in your html. just change your 
 <div class="col-sm-4> or  <div class="col-sm-3> as per your requirements.

<div class='row'>
    {% for product in object_list %}
                   <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item men {{ col_class_set }}">
                       <!-- Block2 -->
                       <div class="block2">
                           <div class="block2-pic hov-img0">
                               <img src="{{ product.image.url }}" alt="IMG-PRODUCT">

                               <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                   Quick View
                               </a>
                           </div>

                           <div class="block2-txt flex-w flex-t p-t-14">
                               <div class="block2-txt-child1 flex-col-l ">
                                   <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                       {{product.title}}
                                   </a>

                                   <span class="stext-105 cl3">
                                       ${{product.price}}
                                   </span>
                               </div>

                               <div class="block2-txt-child2 flex-r p-t-3">
                                   <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                       <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                       <img class="icon-heart2 dis-block trans-04 ab-t-l" src="{% static "images/icons/icon-heart-02.png" %}" alt="ICON">
                                   </a>
                               </div>
                           </div>
                       </div>
                   </div>
           {% endfor %}
   </div>

推荐阅读