Twitter Bootstrap umieszczane sidebar załamuje się kiedy przewijać

Question

Próbuję utworzyć pasek boczny, jak te na Twitter bootstrapowych docs: http://twitter.github.com/bootstrap/getting-started.html

Mam przyrostek pracę i wszystko, ale kiedy tylko przewinąć przeszłości Dane- przesunięcie paska zwinięcie, ponieważ nie ma.

HTML

<div class="span3"> 
      <ul data-spy="affix" data-offset-top="255" class="nav nav-tabs nav-stacked docs-sidebar" id="navbar"> 
      <li><a href="#grid">Grid system <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#layouts">Layouts <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#responsive">Responsive design <i class="icon-chevron-right pull-right"></i></a></li> 
      </ul> 
      <p></p> 
     </div> 

MNIEJ

// For Affix plugin 
.affix { 
    position: fixed; 
    top: (@navbarHeight * 1.8) + @navbarPadding + 25px; 
} 

.docs-sidebar { 
    width: (@gridColumnWidth * 4); 
} 

To sprawia, że ​​pasek boczny stałą szerokość span4 ale nie czyni to reaguje. Jak mogę się upewnić, że jest responsywny?

Answer 1

Ja też próbuję znaleźć najlepszy sposób na zrobienie tego. Oto co zrobiłem. Może nie najlepsze rozwiązanie, ale działa.

Mam układ dwóch kolumn, w którym chcę lewej do .affix. Wyciągnąłem kolumnę, aby naprawić z rzędu i umieścić ją we własnym rzędzie nad oryginałem. Przeniosłem pozostałą kolumnę z powrotem na miejsce, dodając .offset3. Umieściłem .affix na kolumnie div zamiast na ul. Następnie owinąłem stałą kolumnę w div z CSS pozycji: absolute; (to jest wewnątrz .row div i poza .col3 div), Który nakłada dwa .row div do zachodzenia na siebie, gdzie jeden jest stały, a drugi przewijanie.