Bootstrap navbar-fixed-top不起作用

我正嘗試在頁面頂部創建一個固定導航欄的頁面。我需要的是類似this。Bootstrap navbar-fixed-top不起作用

正如我們在上面的鏈接頁面中看到的，頁面的內容在優先導航欄後開始。但就我而言，內容從頁面的開始處開始。這就像導航欄放在其他內容之上一樣。

你可以看到的jsfiddle演示here。

在演示頁面中，我沒有添加任何新內容。它包含此問題前面鏈接的頁面的源。

這是我的導航欄和其他div已放入頁面的正文部分。

<!-- Fixed navbar --> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      ....... 
     </button> 
     <a class="navbar-brand" href="#">Bootstrap theme</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       ....... 
      </ul> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </nav> 

    <div class="container theme-showcase" role="main"> 
    ..... 
    </div>

爲什麼我不能根據需要看到我的頁面。我在代碼中遺漏了什麼？

來源

2016-11-26 vigamage

有在HTML中你有沒有任何問題jst添加一些CSS屬性，如'padding'，'margin'，'position' –

是的，我剛剛意識到這一點。我認爲這是我的導航欄中的錯誤。事實上，我誤解了導航欄的概念。我認爲它爲身體頂部分配了一些空間，除了在滾動發生的時候始終處於頁面頂部之外。 – vigamage

添加CSS：

body { 
    padding-top: 70px; 
}

您可以在這裏檢查元素看到這一點。它確實存在於CSS中。 https://getbootstrap.com/examples/navbar-fixed-top/

來源

2016-11-26 14:45:08 Swapna

非常感謝。我認爲這與導航欄有關。 – vigamage

在引導模板他們有這樣的CSS代碼

body { 
    padding-top: 70px; 
    padding-bottom: 30px; 
}

這個代碼在其中不包括在你的HTML theme.css文件中使用。

您可以通過在你的CSS代碼將只以上的代碼解決這個

，或者你可以鏈接到theme.css文件中的HTML代碼

來源

2016-11-26 14:45:38 Chiller

Bootstrap navbar-fixed-top不起作用

回答

相關問題