时间戳

首页 > 解决方案 > 根据浏览器窗口大小更改 Django 模板循环行为

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

问题描述

我的网络应用程序使用 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 模板语言链接起来。谢谢您的帮助。

幸福

悲伤

标签： cssdjangotwitter-bootstrapdjango-templatesmedia-queries

解决方案

最终弄清楚如何使用 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 %}

推荐阅读