將內容/橫幅放置在「固定頂部導航欄」上方

Question

我希望將一個橫幅放在Bootstrap的固定頂部導航欄上。我的目標是使用導航欄作爲操作導航並在其上方放置項目的標題。如果在滾動的情況下導航欄一直在那裏，它會很酷，但是橫幅消失會更好。

我怎樣才能做到這一點，任何例子？

Answer 1

作爲對Skelly解決方案的迴應，我不會推薦使用引導程序的網格系統來設置標題的樣式。原因是在移動設備上，即使使用「hidden-sm」，這也會造成不必要的行分離或不必要的間隔。您可以看到這一點，因爲您將正確的元素靠近瀏覽器的左側元素。

而是使用..「導航標頭」

<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

訣竅是使用affix，然後你不一定需要把旗幟在<header>。

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> 

退房的demo in bootstrap 3.1.1。