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

Question

当使用分辨率为760的智能手机查看时，它看起来像是1288

网页的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 %}

我想把除法改成：“4”相对于屏幕大小的数字4。例如，divisibleby：“1”用于移动屏幕，divisibleby：“3”用于平板电脑，divisibleby：“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 %}

{{cd3>如果你确实需要增加一些高度的话。在