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

Posted 2023-02-24

【中文标题】如何使用屏幕大小更改 django 模板中的列数

【英文标题】：how to change number of columns in django template with screen size

【发布时间】：2016-02-24 11:11:10

【问题描述】：

当页面以 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_urlimages/vendor/ discount.product_vendor__vendor_logo " class="img-responsive" >-->
            <img src="% static "images/vendor/" % discount.product_vendor__vendor_logo " class="img-responsive" >
        </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" >
        </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" 用于台式机。请帮忙。

【参考方案1】：

没有特别的理由将每个产品分成几行。这使您的模板工作更加困难。我什至不确定您是否需要使用divisibleby。我会推荐类似的东西：

% for discount in object_list %
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <!--<img src="static_urlimages/vendor/ discount.product_vendor__vendor_logo " class="img-responsive" >-->
        <img src="% static "images/vendor/" % discount.product_vendor__vendor_logo "
             class="img-responsive" >
        <img src="
                % static "images/products/" % discount.product_vendor__vendor_alias /full/ discount.product_image "
             class="img-responsive" >
         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> 或注意您的身高。