內容下面固定頂導航欄（自舉）

Question

這裏的一個小塊的HTML代碼：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="collapse navbar-collapse" id="div1"> 
     <ul class="nav navbar-nav"> 
      <li> 
      <a href="#" class="navbar-brand">site</a> 
      </li> 
      <li> 
      <a href="#">link1</a> 
      </li> 
      <li> 
      <a href="#">link2</a> 
      </li> 
      <li> 
      <a href="#">link3</a> 
      </li> 
      <li> 
      <a href="#">link4</a> 
      </li> 
      <li> 
      <a href="#">link5</a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
      <a href="#">Logoff</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
    <div class="container"> 
    <div class="row"> 
    <h1>Hello, world!</h1> 
    </div> 
    </div> 

固定頂部導航欄停留在你好，世界的頂端，像顯示在圖像。

如果我只使用導航欄和導航欄默認類，則「hello，world」將正常顯示。我怎樣才能使它正常顯示？

Answer 1

.navbar-fixed-*類使得導航欄fixed，即它在您滾動時與您的頁面一起移動。這種類型的定位將其從文檔的流程中取出，這就是爲什麼頁面的其他部分表現得像它不存在的原因。

要解決你的問題，你應該添加一些填充到你的頁面的頂部：

body { 
    padding-top: 70px; 
} 

誠如在引導的docs。