Bootstrap 3.0'da yapışkan taraf navbar oluştur

Question

Web Sitemde, Sol taraftaki Yapışkan Taraflı Navbar oluşturmak istiyorum. & Bootstrap 3 RC2 Kullanıyorum. Nasıl yapılacağını bilmiyorum.

Answer 1

Twitter'ın Bootstrap 3 varsayılan Navbar'ı yataydır. Dört tür vardır, varsayılan, statik üst ve sabit üst ve alt, bu sayfanın örnek bölümüne bakın: http://getbootstrap.com/getting-started

Ama tabii ki (sol) bir yan gezinme oluşturmak için Twitter'ın Bootstrap 3'ü kullanabilirsiniz. Lütfen önce Dokümanlar'ı okuyun, birçok örnek içerir. Fikir taslağını oluştur, örneklerle kodlamayı dene. Kodunuzun sorununu çözmek için soru sorun. Önce eki (http://getbootstrap.com/javascript/#affix) ve nav bölümünü (http://getbootstrap.com/components/#nav) başlatın.

Belki de kontrol edin: how to make bootstrap off canvas nav overlap content instead of move it

Answer 2

Sen kenar çubuğu sabit hale geldiğinde için CSS tanımlamak gerekir ... Örneğin

, İşte

#sidebar.affix { 
    position: fixed; 
    top:25px; 
    width:228px; 
    } 

örnek çalışan bir geçerli: http://bootply.com/73864

Answer 3

Haklı olduğun yapışkan navbar affı sayesinde mümkün. ix eklentisi. view the bootstrap documentation on this.

Bu Jsfiddle, çalışan bir yapışkan kenar çubuğu içerir (sonuç penceresinin düzgün çalıştığını görmek için daha büyük hale getirin). Aynı kenar çubuğu oluşturmak için okumaya devam edin.

1. Kenar çubuğunuz için html oluşturun. Bu örnekte bir kuyunun içinde bootstraps nav-pills kullanacağız.

<div class="row"> 
    <div class="col-sm-3"> 
    <div class="well bs-sidebar affix" id="sidebar"> 
     <ul class="nav nav-pills nav-stacked"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     </ul> 
    </div> <!--well bs-sidebar affix--> 
    </div> <!--col-sm-3--> 
    <div class="col-sm-9"> 
    <p>Main body content goes here</p> 
    </div> <!--col-sm-9--> 
</div> <!--row--> 

2.

sizin js Eklerin eklentisi kenar çubuğu üzerinde olacak ne olursa olsun 'başlığını' değiştirmeniz gerekiyor

$('#sidebar').affix({ 
    offset: { 
    top: $('header').height() 
    } 
}); 

dosyasını çağırır. Eğer bir önyükleme navbar kullanıyor ve kenar çubuğu üzerinde doğrudan değilse, örneğin, gezinme çubuğu için kullandığınız sınıf ile 'başlığı' değiştirin:

top: $('.navbar navbar-default').height() 

3. Ekleme css Eklerin sınıf için

duyarlı düzen için duyarlı olmayan düzen

.bs-sidebar.affix { 
    width: 263px; 
    top: 25px; 
} 

CSS

CSS

@media (min-width: 768px) { 
    .bs-sidebar.affix { 
    width: 158px; 
    top: 25px; 
    } 
} 

@media (min-width: 992px) { 
    .bs-sidebar.affix { 
    width: 213px; 
    position: fixed; 
    top: 25px; 
    } 
} 

@media (min-width: 1200px) { 
    .bs-sidebar.affix { 
    width: 263px; 
    } 
}