"Sabit Üst Navbar" ın üstüne içerik/banner koymak

Question

Bootstrap'in sabit üst navbar üzerine bir banner koymak istiyorum. Amacım, operasyonlar için navigasyon olarak navbarın kullanılması ve projenin bir afişinin üzerine yerleştirilmesi. Kaydırma durumunda navbar alsa da serin olacaktır, ancak afişin kaybolması daha iyidir.

Bunu nasıl başarabilirim, herhangi bir örnek?

Answer 1

Skelly'nin çözümüne yanıt olarak, başlığınızı şekillendirmek için bootstrap'ın ızgara sistemini kullanmanızı önermem. Bunun nedeni, mobil cihazlarda bunun, "gizli-sm" kullanımı ile bile gereksiz hat ayırma veya istenmeyen boşluk oluşturacak olmasıdır. Bunu, sağ öğeyi tarayıcınızda sol elemana yaklaştırırken görebilirsiniz.

yerine

<header class="masthead"> 
    <div class="container"> 
    <div class="nav-header"> 
     <h1> 
      <a href="#" title="scroll down for your viewing pleasure"> 
       Bootstrap 3 Layout Template 
      </a> 
      <p class="lead">Big Top Header and Fixed Sidebar</p> 
     </h1> 
     <div class="pull-right hidden-sm">  
      <h1> 
      <a href="#"><i class="glyphicon glyphicon-user"></i> 
       <i class="glyphicon glyphicon-chevron-down"></i> 
      </a> 
      </h1> 
    </div> 
    </div> 
</div> 
</header> 

Answer 2

hüner affix kullanarak içindedir .. "Nav-header" kullanın ve sonra mutlaka <header> yılında afiş koymak gerekmez.

css:

#topnavbar { 
    margin: 0; 
} 
#topnavbar.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

js:

$('#topnavbar').affix({ 
    offset: { 
     top: $('#banner').height() 
    } 
}); 

html:

<div class="container" id="banner"> 
    <div class="row"> 
     <h1> Your banner </h1> 
    </div> 
</div> 

<nav class="navbar navbar-default navbar-static-top" role="navigation" id="topnavbar"> 
    ... 
</nav> 

atın demo in bootstrap 3.1.1.