python之如何使用屏幕大小更改django模板中的列数

当以 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"用于移动屏幕，divisibleby:"3"用于平板电脑，divisibleby:"4"用于台式机。请帮忙。

请您参考如下方法:

没有特别的理由将每个产品分成几行。这使您的模板工作更加困难。我什至不确定你是否需要使用 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>或注意高度。