Загрузочная боковая панель не скрывается в сторону

Question

У меня проблема с моим кодом начальной загрузки. Я пытаюсь сделать боковую панель с правой стороны на мобильном устройстве, примерно так же, как здесь: http://getbootstrap.com/examples/offcanvas/, но я не могу заставить его работать. Я также пытаюсь изменить значок шеврона между стрелками влево и вправо, но это не работает, хотя я получил его для работы с левой боковой панелью. Мой проект находится здесь, любая помощь с благодарностью piston.serverpit.com/bootstrap/main

EDIT: Мне удалось заставить кнопку и действие работать правильно, теперь единственная проблема заключается в том, что боковая панель помещается под содержимым страницы, а не в стороне от него. Как это исправить?

Fiddle: http://jsfiddle.net/zauLh39y/ 

EDIT2: Есть рабочий пример, начав с нуля, с offcanvas например, но когда я пытаюсь поставить код статьи в теле, то он до сих пор ломает ... Идеи? Похоже, основная проблема заключалась в установке минимальной ширины боковой панели в CSS. http://jsfiddle.net/xyd6ttbe/

Answer 1

Мне удалось это исправить; основная проблема заключалась в том, чтобы заставить ширину боковой панели и причину, по которой она попала под статью, была связана с тегом <hr>.

Для изменения кода смотрите здесь: http://jsfiddle.net/rwstwv0e/

Answer 2

согласно вашему внешнему примеру, обновление до этой

#sidebar{ 
    position: absolute; 
    /* no float, no left or right */ 
} 
.row-offcanvas-right { 
    left: 100%; /*instead of right xx...*/ 
} 
.row-offcanvas-right.active { 
    left: 50%; /*instead of right xx...*/ 
} 

Вам может понадобиться обновить CSS для широкоформатного режима, тоже.

Кстати: если вы предоставите рабочую демонстрацию в jsfiddle, codepen или stackoverflow, вам будет легче помочь.