テンプレートとブートストラップを使用してレスポンシブウェブを構築するにはどうすればよいですか？

Question

私は流星でWebアプリケーションを構築しています。今、私は2つのテンプレートを含むこのWebページを作成しようとしています。

基本設計レイアウト：

まずテンプレート：このテンプレートは、左のメニューバー（4タブ）が含まれています。

次に、2番目のテンプレート（紫色）を追加した後の外観です。

私は何をしたい残りのレイアウトを維持しながら、4つのタブのための紫色の領域にテンプレートを切り替えることです。ブートストラップを使ってレイアウトを設定しています。ただし、小さい方のウィンドウにサイズ変更しようとすると、次のようになります。

問題1.緑色と紫色の部分が重なって表示されます。

issue 2.紫色の領域を下に移動するように上のパディングを設定した後、下にスクロールすると、これらの2つのテンプレートが重なり合う部分が残ります。

ここで最善のアプローチは何ですか？ここで

は私のコードは次のとおりです。

最初のテンプレートインサイド

<template name="layout"> 
{{header}} 

{{> Template.dynamic template=template1}} 
{{> Template.dynamic template=purpleTemplate2}} 

{{> footer}}  
</template> 

：

<div> 
    <div class="col-xs-12 col-md-3" > 
     //content - four tabs 
    </div> 
    <div class="col-xs-12 col-md-9"> 
    </div> 
</div> 

2番目のテンプレート内部：

... TAB2 ... TAB3と同じ

<div id="tab1"> 
    <div class="col-xs-12 col-md-3" >   
    </div> 
    <div class="col-xs-12 col-md-9"> 
     //tab 1 content 
    </div> 
</div> 

.. .tab4

私はこのマックesセンス。必要に応じて詳細をお知らせします。事前にあなたの助けをありがとう！

今追加：

は、私は、ブラウザのサイズを変更すると、理想的には次のようになります。

：

をしかし、それはこのようになります

左のメニューバーが上に残りますt。しかし、下にスクロールすると、紫色の領域が上にスクロールしてメニューをカバーします。また、フッターは紫色の領域にも残ります。

Answer 1

ダイナミックテンプレートにラッパーを設定することから始めます。

<div class="col-xs-12 col-md-3" > 
    {{> Template.dynamic template=template1}} 
</div> 
<div class="col-xs-12 col-md-9"> 
    {{> Template.dynamic template=purpleTemplate2}} 
</div> 

これは、おそらく、動的HTMLの中にブートストラップ・コラムを必要としないことを意味します。

私が手早くHERESに例：迅速な返信用 http://codepen.io/nilestanner/pen/PGwAXL