如何使用模板和引導來構建響應式Web？

Question

我正在用流星搭建一個web應用程序。現在，我正在嘗試創建包含兩個模板的網頁。

基本設計佈局：

第一個模板：該模板包含在左側菜單欄中（4個選項卡）。

接下來是添加第二個模板（紫色）後的樣子。

我想要做的是在紫色區域切換模板的4個標籤，同時保持其餘的佈局。我使用引導來設置佈局。但是，當我嘗試將窗口大小調整爲較小的值時：

問題1.綠色和紫色部分將相互堆疊。

問題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> 

內第二次模板：

<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> 

一樣... ... TAB2 TAB3 .. .tab4

我希望這個mak意義。如果需要，我很樂意爲您提供更多詳細信息。預先感謝您的幫助！！

剛剛添加：

理想的情況下，它應該是這樣的，當我調整瀏覽器：

但是，它看起來像這樣：

左側菜單欄位於頂部，這就是我所要做的噸。但是當我向下滾動時，紫色區域將向上滾動並覆蓋菜單。此外，頁腳似乎也停留在紫色區域。

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裏面的引導列。

繼承人一個例子，我掀起了： http://codepen.io/nilestanner/pen/PGwAXL