在 Django 模板中没有多个 {% block content %} 的移动和桌面的不同 css 边距

Question

我需要根据查看器是使用移动设备还是桌面设备来更改应用于{% block content %}我的base.html模板（包含我的导航栏和其他常用元素）中的主要内容的 margin-left 。

我的电流base.html是这样的：

<div class="content container-fluid">
    <div class="row">
        <div class="col-md-8">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</div>

带有包含以下内容的 css 文件：

.content {
    margin-left: 40px;
}

.content_mobile {
    margin-left: 10px;
}

鉴于在我的应用程序的其他部分我已经通过使用以下专用的 Bootstrap 类完成了类似的事情，我的第一个想法是使用类似的东西来做同样的事情：

<div class=".visible-xs-block, hidden-xs">
    <div class="content container-fluid">
        <div class="row">
            <div class="col-md-8">
                <!-- This is hidden from mobile view -->
                {% block content %}
                {% endblock %}
            </div>
        </div>
    </div>
</div>

<div class=".visible-lg-block, hidden-lg .visible-md-block, hidden-md .visible-sm-block, hidden-sm">
    <div class="content_mobile container-fluid">
        <div class="row">
            <div class="col-md-8">
                <!-- This is hidden from all other views (including desktop) -->
                {% block content %}
                {% endblock %}
            </div>
        </div>
    </div>
</div>

但是 Django 引发了一个异常，因为它{% block content %}每个模板只能渲染 1个！

任何想法如何在不使用多个块的情况下做到这一点？

Answer 1

例子 ：

<div class="content">Some thing </div>

您想根据显示尺寸提供不同的边距

比这样做

在您的常用 css 中：

@media (max-width: 480px) {
    .content{
       margin-left: 20px;
    }
}

@media (max-width: 320px) {
    .content{
       margin-left: 10px;
    }
}

和

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }