如何使用模板和引导程序构建响应式 Web？

Question

我正在用流星构建一个网络应用程序。现在，我正在尝试创建包含两个模板的网页。

基本设计布局：

第一个模板：此模板包括左侧菜单栏（4 个选项卡）。

接下来是添加第二个模板（紫色）后的样子。

我想要做的是在紫色区域为 4 个选项卡切换模板，同时保持其余布局。我正在使用引导程序来设置布局。但是，当我尝试将窗口调整为更小的窗口时：

问题1.绿色和紫色部分会相互叠加。

issue 2. 在我设置了一个top padding 将紫色区域向下移动后，当我向下滚动时，这两个模板仍有一部分会相互堆叠。

这里最好的方法是什么？

这是我的代码：

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

我希望这是有道理的。如果需要，我很乐意为您提供更多详细信息。提前感谢您的帮助！！

刚刚添加：

理想情况下，当我调整浏览器大小时，它应该是这样的：

但是，它看起来像这样：

左侧菜单栏保持在顶部，这是我想要的。但是当我向下滚动时，紫色区域会向上滚动并覆盖菜单。此外，页脚似乎也与紫色区域保持一致。

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