twitter bootstrap 導航欄固定頂部重疊站點

Question

我在我的網站上使用引導程序，但導航欄固定頂部有問題。 當我只使用常規導航欄時，一切都很好。 但是，當我嘗試將其切換到固定頂部導航欄時，網站上的所有其他內容都會向上移動，就像導航欄不存在並且導航欄重疊一樣。 這基本上是我的布局方式：

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

我試圖完全復制引導程序示例，但僅在使用導航欄固定頂部時仍然存在此問題。 我究竟做錯了什么？

Answer 1

您的答案在文檔中是正確的：

需要身體填充

固定導航欄將覆蓋您的其他內容，除非您在<body>的頂部添加padding 。 嘗試您自己的價值觀或使用我們下面的代碼片段。 提示：默認情況下，導航欄高 50 像素。
 body { padding-top: 70px; }
確保在核心 Bootstrap CSS之后包含它。

並在Bootstrap 4 文檔中...

固定導航欄使用 position: fixed ，這意味着它們是從 DOM 的正常流中拉出來的，並且可能需要自定義 CSS（例如，上的 padding-top ）以防止與其他元素重疊。

Answer 2

正如其他人所說，在 body 上添加一個 padding-top 效果很好。 但是當你把屏幕變窄（到手機寬度）時，導航欄和主體之間就會出現間隙。 此外，擁擠的導航欄可以換行到多行欄，再次覆蓋某些內容。

這為我解決了這些問題

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

默認情況下，這會產生 40 像素的填充，寬度低於 768 像素時會產生 0 像素（根據引導程序的文檔，這是將創建間隙的手機布局截止點）

Answer 3

一個更方便的解決方案供您參考，它在我的所有項目中都能完美運行：

改變你的第一行

.navbar.navbar-fixed-top

到

.navbar.navbar-default.navbar-static-top

Answer 4

@Ryan，你是對的，在自定義導航欄的情況下，硬編碼高度會使它工作不好。 這是我愉快地用於 BS 3.0.0 的代碼：

$(window).resize(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);         
});

Answer 5

這個問題是已知的，在 twitter bootstrap 站點中有一個解決方法：

粘貼導航欄時，請記住考慮下方的隱藏區域。 向<body>添加 40px 或更多的填充。 確保在核心 Bootstrap CSS 之后和可選的響應式 CSS 之前添加它。

這對我有用：

body { padding-top: 40px; }

Answer 6

Bootstrap 4 的解決方案，它在我的所有項目中都能完美運行：

改變你的第一行

navbar-fixed-top

到

sticky-top

Bootstrap 文檔參考

是時候他們做對了：D

Answer 7

只需使用sticky-top更改fixed-top sticky-top 。 這樣你就不必計算填充。
它有效！！

Answer 8

我把它放在產量容器之前：

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

我喜歡這種方法，因為它記錄了讓它工作所需的 hack，而且它也適用於移動導航。

編輯 - 這效果更好：

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

Answer 9

正如我在一個類似的問題中發布的那樣，我在我真正的固定導航欄之前創建了一個虛擬的非固定導航欄，並取得了很好的成功。

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

間距適用於所有屏幕尺寸。

Answer 10

問題在於導航欄固定頂部，除非指定正文填充，否則它將覆蓋您的內容。 此處提供的任何解決方案都無法在 100% 的情況下起作用。 JQuery 解決方案在頁面加載后閃爍/移動頁面，看起來很奇怪。

對我來說真正的解決方案不是使用 navbar-fixed-top，而是 navbar-static-top。

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>

Answer 11

以前的所有解決方案都以一種或另一種方式將 40 像素專門硬編碼到 html 或 CSS 中。 如果導航欄包含不同的字體大小或圖像怎么辦？ 如果我有充分的理由不首先弄亂身體填充怎么辦？ 我一直在尋找解決這個問題的方法，這是我想出的：

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

您可以通過調整“1”來上下移動它。 無論導航欄中內容的大小如何，在調整大小之前和之后，它似乎都對我有用。

我很好奇其他人對此有何看法：請分享您的想法。 （它會被重構為不再重復，順便說一句。）除了使用 jQuery，還有沒有其他理由不以這種方式解決問題？ 我什至讓它與這樣的輔助導航欄一起工作：

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS：以上是在 Bootstrap 2.3.2 上 - 它可以在 3.x 中工作，只要通用類名仍然存在......事實上，它應該獨立於引導程序工作，對嗎？

編輯：這是一個完整的 jquery 函數，它處理兩個動態大小的堆疊、響應式固定導航欄。 它需要 3 個 html 類（或可以使用 id 的）：user-top、admin-top 和 contentwrap：

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});

Answer 12

要處理菜單欄中的換行，請將 id 應用於導航欄，如下所示：

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

並在包含 jquery 后在頭部添加這個小腳本，如下所示：

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

這樣，身體的頂部填充會自動調整。

Answer 13

對於 Bootstrap 3.+ ，我將使用以下 CSS 來修復基於https://github.com/twbs/bootstrap/issues/1768 的導航欄固定頂部和錨點跳轉重疊問題

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

Answer 14

在導航標簽中使用這個類

class="navbar navbar-expand-lg navbar-light bg-light sticky-top "

對於引導程序 4

Answer 15

你所要做的就是

@media (min-width: 980px) { body { padding-top: 40px; } }

Answer 16

除了 Nick Bisby 的回答之外，如果您在 Rails 中使用 HAML 遇到此問題，並且您在此處應用了 Roberto Barros 的修復程序：

我將“bootstrap_and_overrides.css”中的要求替換為：

= 需要 twitter-bootstrap-static/bootstrap.css.erb

（見https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 ）

...您需要將 body CSS 放在 require 語句之前，如下所示：

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

如果 require 語句在 body CSS 之前，則不會生效。

Answer 17

我會這樣做：

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

這應該確保導航塊不會向下拉伸並覆蓋頁面內容。

Answer 18

這對我有用並且看起來不錯。

<body class="pt-5 mt-4">....</body>

Answer 19

我只是將導航欄包裹在一個

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

沒有花哨的 hocus pocus 但它有效..

twitter bootstrap 導航欄固定頂部重疊站點

問題描述

19 個解決方案

解決方案1
556 已采納 2012-06-20 17:19:46

需要身體填充

解決方案2
129 2012-10-24 14:56:58

解決方案3
35 2015-06-18 22:04:10

解決方案4
29 2013-10-17 06:50:54

解決方案5
28 2012-06-20 17:22:29

解決方案6
26 2018-07-20 13:25:00

解決方案7
25 2019-08-07 14:50:05

解決方案8
22 2012-12-22 16:09:09

解決方案9
18 2016-03-16 01:44:49

解決方案10
16 2015-01-10 22:48:26

解決方案11
14 2013-08-05 07:47:41

解決方案12
11 2013-11-25 16:00:12

解決方案13
4 2014-12-06 08:42:56

解決方案14
4 2019-01-30 19:30:51

解決方案15
1 2014-08-13 02:13:23

解決方案16
0 2014-06-23 16:54:17

解決方案17
0 2015-04-30 18:29:12

解決方案18
0 2021-11-27 13:56:14

解決方案19
-4 2014-03-05 01:19:41

twitter bootstrap 導航欄固定頂部重疊站點

問題描述

19 個解決方案

解決方案1 556 已采納 2012-06-20 17:19:46

需要身體填充

解決方案2 129 2012-10-24 14:56:58

解決方案3 35 2015-06-18 22:04:10

解決方案4 29 2013-10-17 06:50:54

解決方案5 28 2012-06-20 17:22:29

解決方案6 26 2018-07-20 13:25:00

解決方案7 25 2019-08-07 14:50:05

解決方案8 22 2012-12-22 16:09:09

解決方案9 18 2016-03-16 01:44:49

解決方案10 16 2015-01-10 22:48:26

解決方案11 14 2013-08-05 07:47:41

解決方案12 11 2013-11-25 16:00:12

解決方案13 4 2014-12-06 08:42:56

解決方案14 4 2019-01-30 19:30:51

解決方案15 1 2014-08-13 02:13:23

解決方案16 0 2014-06-23 16:54:17

解決方案17 0 2015-04-30 18:29:12

解決方案18 0 2021-11-27 13:56:14

解決方案19 -4 2014-03-05 01:19:41

解決方案1
556 已采納 2012-06-20 17:19:46

解決方案2
129 2012-10-24 14:56:58

解決方案3
35 2015-06-18 22:04:10

解決方案4
29 2013-10-17 06:50:54

解決方案5
28 2012-06-20 17:22:29

解決方案6
26 2018-07-20 13:25:00

解決方案7
25 2019-08-07 14:50:05

解決方案8
22 2012-12-22 16:09:09

解決方案9
18 2016-03-16 01:44:49

解決方案10
16 2015-01-10 22:48:26

解決方案11
14 2013-08-05 07:47:41

解決方案12
11 2013-11-25 16:00:12

解決方案13
4 2014-12-06 08:42:56

解決方案14
4 2019-01-30 19:30:51

解決方案15
1 2014-08-13 02:13:23

解決方案16
0 2014-06-23 16:54:17

解決方案17
0 2015-04-30 18:29:12

解決方案18
0 2021-11-27 13:56:14

解決方案19
-4 2014-03-05 01:19:41