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

Question

我需要更改应用于我的主要 {% block content %} 的左侧边距在我的base.html模板(包含我的导航栏和其他常见元素)基于查看器是使用移动设备还是桌面设备。

我的当前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 引发了一个异常，因为它只能渲染 1 {% block content %}每个模板!

有什么想法可以在不使用多个 block 的情况下做到这一点吗？

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 */ }