python - 如何根据屏幕大小更改 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"；对于平板电脑，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 %}

如果由于某种原因(例如项目的高度可变)您确实需要使用divisibleby ，然后添加 <div class="clearfix"></div>或者注意你的高度。