SORU
19 ŞUBAT 2012, Pazar


Kenar Çubuğu sıvı twitter bootstrap 2.0 navigasyon sabit

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

CEVAP
19 ŞUBAT 2012, Pazar


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.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • AlaskanGrizzly

    AlaskanGrizz

    30 EKİM 2009
  • ArkticPlanet

    ArkticPlanet

    9 ŞUBAT 2010
  • RFS Dan

    RFS Dan

    22 Temmuz 2014