Djangoテンプレートで複数の{％ブロックコンテンツ％}を使用しないでモバイルとデスクトップのCSSマージンを変更する

Question

base.htmlテンプレート（自分のnavbarや他の共通要素を含む）のメイン{% block content %}に適用される余白を変更する必要があります。視聴者がモバイルまたはデスクトップを使用している場合に基づいています。

私の現在のbase.htmlがあるように：含むCSSファイルと

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

：

自分のアプリケーションの他の部分で、私は以下の専用ブートストラップを使用して、類似した何かを成し遂げてきたことを考えると

.content { 
    margin-left: 40px; 
} 

.content_mobile { 
    margin-left: 10px; 
} 

私の最初の考えは、次のようなものを使って同じことをすることでした：

<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つのテンプレートに対して1つしかレンダリングできないため、例外が発生します！

どのように私は複数のブロックを使用せずにこれを行うことができます任意のアイデア？

Answer 1

例：

あなたは、共通のCSSでこの

を行うよりも、ディスプレイ

の大きさに基づいて、異なる余裕を与えたい

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

：

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