Twitter Bootstrap 3 - Navbar固定頂部 - 多行時重疊內容

Question

首先，這不是固定頂部導航的主體填充頂部問題。

body { padding-top: 40px; }

我有一個導航欄，無論好壞，都有大量的數據/信息。 我遇到的問題是，當導航欄分成多行（完全沒問題）時，它會重疊內容（壞）。

以下是我所看到/經歷的一個例子。 http://jsfiddle.net/jsuggs/ZaMs3/7/

有沒有人有一個聰明的JavaScript解決方案來改變身體填充或當導航欄分成多行時強制崩潰的方法？

更新

這是我最終使用的。 我不得不添加一些額外的填充並組合加載和調整大小事件。

$(window).on('load resize', function() {
    $('body').css({"padding-top": $(".navbar").height() + 30 + "px"});
});

Answer 1

$(window).on('resize load', function() {
    $('body').css({"padding-top": $(".navbar").height() + "px"});
});

http://jsbin.com/iJaJAzIM/2/edit

Answer 2

一種可能的解決方案是使用媒體查詢來檢查不同的寬度。 就像是

@media screen and (max-width: 1414px) and (min-width: 768px) {
    body {
        padding-top: 80px;
    }
}

@media screen and (max-width: 902px) and (min-width: 768px)  {
    body {
        padding-top: 120px;
    }
}

在你小提琴上的Chrome上為我工作。

這個解決方案的缺點是，如果你修改了導航元素，它需要進行大量的調整和更改，並且可能很難在所有瀏覽器上正確使用它...