Bootstrap 3 и affix (Фиксированный DIV на twitter bootstrap)

После мучений с тегом affix и сделать фиксированный DIV не ломая разметки Twitter Bootstrap 3 нашел свое решение ...

Но в начале предистория, о том как сделать вертикальное фиксированное меню.

После классической верстки меню с тегами nav (см. мануал на сайте bootstrap) и добавления класса <nav class="vertical-menu affix"> меню сайта фиксировалось, но вместо желаемого(смотреть сверху) получалось то, что видно на картинке снизу.

Интересно, но если классу vertical-menu добавить position: fixed; то получаем тот же эффект. Это объясняется тем, что данный элемент становится независимым от текущего расположения и его размеры и положение фиксируются относительно окна браузера. 

Вот решение которое мне помогло:

.vertical-menu,
.vertical-menu > div{
    width: 100%;
}
.vertical-menu > div:after{
    position: fixed;
}

и добавление внутреннего div'а.