Twitter Bootstrap 3 - 导航栏固定在顶部时，当有多行内容时会重叠

Question

首先，这不是固定顶部导航栏的body padding-top问题。

body { padding-top: 40px; }

我有一个导航栏，里面包含了很多数据/信息，当导航栏换行时（这样做完全没问题），它会与内容重叠（不好）。以下是我遇到的问题示例： http://jsfiddle.net/jsuggs/ZaMs3/7/ 有没有聪明的JavaScript解决方案来更改body内边距或在导航栏换行时强制折叠？ 更新： 这是我最终使用的代码。我不得不添加一些额外的填充并结合加载和调整大小事件。

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

- jsuggs

Answer 1

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

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

- Christina

---

可能有更好的方法，但我的jQuery技能不是很娴熟，但这个方法很简单并且有效。虽然我建议在IE 8中测试以确保兼容性。 - Christina

我认为这就是我需要的。我会试着操作一下，但我会把它设定为获胜者...非常感谢！ - jsuggs

我刚刚更新了答案，使用了相同但更短的脚本。我还在页面上使用它作为锚点，请查看更新后的答案中的链接。 - Christina

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上的Fiddle中对我有效。

这种解决方案的缺点是，如果您修改了导航元素，则需要进行大量调整和更改，并且可能难以在所有浏览器上正确实现...

- Syjin

---

问题在于导航栏的内容是可变的，因此它不会总是在那些宽度处断开。 - jsuggs