如何改变列数在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>或把你的高度关怀（如项目的不同高度）。