Navigasyon her zaman sıvı düzeni, kaydırma üzerinde sabit kalın Kenar Çubuğu yapmak mümkün mü?

Not:Bu yüzden bu cevap yazıldıktan sonra birkaç sürümleri tanıtıldı çok daha fazla (yaklaşık iki yıl) Affix denen şey bu bootstrap jQuery eklentisi var. Bu cevap Eğer Bootstrap 2.0.4 veya daha düşük kullanıyorsanız geçerlidir.

Evet, sadece kenar çubuğu için yeni sabit bir sınıf oluşturun ve sol kenar boşluğu telafi etmek için içerik div uzaklığı sınıf, gibi ekleyin:

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Demo: http://jsfiddle.net/U8HGz/1/show/ Edit: http://jsfiddle.net/U8HGz/1/

Güncelleme

Demomu sabit duyarlı bootstrap sayfasına destek için, şimdi bootstrap, duyarlı özelliği ile akar.

Bu demo top sabit gezinti çubuğu ile akar, her ikisinden ekran yeniden boyutlandırma üzerine position:static olmak, başka bir demo altına yerleştirdim ekranı mobile görüntülemek için düşene kadar sabit Kenar Çubuğu tutar. not:

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

Demo, here Düzenle.

^{küçük bir not: burda 10px/1% fark genişliği sabit Kenar Çubuğu, onun sayesinde aslında o zamandan beri değil miras genişliği gelen span3 konteyner div çünkü tamir ettirdim ama bir genişlik. Yeterince yakın.}

Ve burada eğer kenar çubuğunu, ızgara, küçük ekran için düşene kadar sabit tutmak istiyorsanız başka bir yöntem/mobil görünüm.

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

Demo, here Düzenle.