如何改變列數在Django模板與屏幕尺寸

Question

當頁面與768 * 1280（智能手機）號決議，它看起來像網頁

Django的模板認爲是

<div class="row"> 
{% for discount in object_list %} 
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <!--<img src="{{static_url}}images/vendor/{{ discount.product_vendor__vendor_logo }}" class="img-responsive" alt="Image">--> 
      <img src="{% static "images/vendor/" %}{{ discount.product_vendor__vendor_logo }}" class="img-responsive" alt="Image"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <img src="{% static "images/products/" %}{{ discount.product_vendor__vendor_alias }}/full/{{ discount.product_image }}" class="img-responsive" alt="Image"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      {{ discount.product_name }} 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <h5>{{ discount.product_price }}</h5> 
      </div> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <strike> 
      <h5>{{ discount.product_price_old }}</h5> 
      </strike> 
      </div> 
     </div> 

     </div> 
     </div> 
       <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <h5>{{ discount.product_vendor__vendor_odeliver }}</h5> 
      </div> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <h5>{{ discount.diff }}</h5> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
    <!-- if last column in row --> 
    {% if forloop.counter|divisibleby:"4" and not forloop.last %} 
    </div><div class="row"> 
    {% endif %} 
{% endfor %} 

我想改變在divisibleby：「4」數字4相對於屏幕的大小。例如，divisibleby：手機屏幕爲「1」，可分割爲：「3」爲平板電腦，可分割爲：「4」爲桌面。請幫忙。

Answer 1

沒有什麼特別的理由，每個產品都分成幾行。這使您的模板工作更難。我甚至不確定你需要使用divisibleby。我建議是這樣的：

{% for discount in object_list %} 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
     <!--<img src="{{static_url}}images/vendor/{{ discount.product_vendor__vendor_logo }}" class="img-responsive" alt="Image">--> 
     <img src="{% static "images/vendor/" %}{{ discount.product_vendor__vendor_logo }}" 
      class="img-responsive" alt="Image"> 
     <img src=" 
       {% static "images/products/" %}{{ discount.product_vendor__vendor_alias }}/full/{{ discount.product_image }}" 
      class="img-responsive" alt="Image"> 
     {{ discount.product_name }} 
     <div class="row"> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
       <h5>{{ discount.product_price }}</h5> 
      </div> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
       <strike> 
        <h5>{{ discount.product_price_old }}</h5> 
       </strike> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
       <h5>{{ discount.product_vendor__vendor_odeliver }}</h5> 
      </div> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
       <h5>{{ discount.diff }}</h5> 
      </div> 
     </div> 
    </div> 
{% endfor %} 

如果由於某種原因，你確實需要使用divisibleby，然後添加一個<div class="clearfix"></div>或把你的高度關懷（如項目的不同高度）。