Как создать отзывчивый веб-сайт с использованием шаблонов и бутстрапа?

Question

Я создаю веб-приложение с метеор. Прямо сейчас я пытаюсь создать эту веб-страницу, содержащую два шаблона.

Основные макеты дизайна:

Первый шаблон: Этот шаблон включает левую панель меню (4 вкладки).

Далее следует, что после добавления 2-го шаблона (фиолетового).

То, что я хочу сделать, это переключение шаблонов в фиолетовой области для 4 вкладок, сохраняя при этом расположение сиденья. Я использую bootstrap для установки макета. Однако, когда я пытаюсь изменить размер окна на меньшее:

выпуск 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

Я надеюсь, что этот мак смысл. Я буду рад предоставить вам более подробную информацию, если потребуется. Заранее спасибо за вашу помощь!!

РАЗ ДОБАВЛЕНО:

В идеале, он должен выглядеть следующим образом при изменении размера браузера:

Однако, это выглядит следующим образом:

Левая строка меню находится сверху, что я и делаю т. Но когда я прокручу вниз, фиолетовая область будет прокручиваться вверх и закрывать меню. Кроме того, нижний колонтитул, похоже, остается с фиолетовой областью.

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> 

Это означает, что вам, возможно, не нужны бутстрапы cols внутри динамического html.

Вот пример я взбитый: http://codepen.io/nilestanner/pen/PGwAXL