根据浏览器窗口大小更改 Django 模板循环行为

Posted 2023-02-24

【中文标题】根据浏览器窗口大小更改 Django 模板循环行为

【英文标题】：Change Django template loop behavior based on browser window size

【发布时间】：2020-07-06 12:32:50

【问题描述】：

我的 Web 应用程序使用 Django 模板进行循环以在一行中显示一年中的 52 周。显示 52 周后，我使用<br> 标记来换行并开始下一年的几周。这在大屏幕上效果很好，但是当我将屏幕尺寸减小到小于 1200 像素（Bootstrap xl 设置）时，漂亮的换行符然后溢出填充下一行，造成不均匀的中断。

对于大于 1200 像素的浏览器窗口大小，我想继续显示 52 周，以单字字符（在本例中为“X”和“O”）表示。

对于半小于 1200 像素的浏览器窗口，我希望每行仅显示 13 周（52 除以 4），这样一个“年”占四行。

这是我的代码：

% extends 'base.html' %

% block content %
<p class="text-monospace">
    % for week in week_list %
    % if week.is_current_week %
    <a href="% url 'week_view' week.week_number %">H</a>
    % elif week.is_past %
    <a href="% url 'week_view' week.week_number %">X</a>
    % else %
    <a href="% url 'week_view' week.week_number %">O</a>
    % endif %

    % if week.week_number|divisibleby:"52" %
    <br>
    % endif %
    % endfor %
</p>

% endblock %

我知道一些 javascript，但对 CSS 了解不多。解决这个问题的最佳方法是什么？在我的一些搜索中，我看到响应“使用媒体查询”。如果是这样，那就太好了！我只是不确定如何将它与 Django 模板语言链接起来。感谢您的帮助。

【参考方案1】：

最终弄清楚如何使用 Bootstrap 网格系统实现这一点。

% extends 'base.html' %

% block content %
<div class="row no-gutters text-monospace">
    <div class="col-xl-3-m-0 col-lg-12-m-0">
        % for week in week_list %


        % if week.is_current_week %
        <a href="% url 'week_view' week.week_number %">H</a>
        % elif week.is_past %
        <a href="% url 'week_view' week.week_number %">X</a>
        % else %
        <a href="% url 'week_view' week.week_number %">O</a>
        % endif %

        % if week.week_number|divisibleby:"52" %
    </div>
</div>
<div class="row no-gutters text-monospace">
    <div class="col-xl-3-m-0 col-lg-12-m-0">
        % elif week.week_number|divisibleby:"13" %
    </div>&nbsp;
    <div class="col-xl-3-m-0 col-lg-12-m-0">
        % endif %

        % endfor %
    </div>
</div>

% endblock %