Twitter引导程序3-导航栏固定顶部-多行时重叠内容

Twitter Bootstrap 3 - Navbar Fixed Top - Overlaps content when multiple lines

本文关键字：重叠 顶部 引导程序 导航 Twitter      更新时间：2024-03-23

首先，这不是固定顶部导航的主体填充顶部问题。

body { padding-top: 40px; }

我有一个导航栏，不管是好是坏，里面有很多数据/信息。我遇到的问题是，当导航栏分成多行时（这很好），它会与内容重叠（坏）。

以下是我所看到/经历的一个例子。http://jsfiddle.net/jsuggs/ZaMs3/7/

有没有人有一个聪明的javascript解决方案来更改正文填充，或者有一种方法在导航栏分成多行时强制折叠？

更新

以下是我最终使用的内容。我不得不添加一些额外的填充，并将加载和调整大小事件组合在一起。

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

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

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

一种可能的解决方案是使用媒体查询来检查不同的宽度。类似的东西

@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;
    }
}

在你的Fiddle上为我在Chrome上工作。

这个解决方案的缺点是，如果你修改导航元素，它需要大量的调整和更改，而且可能很难在所有浏览器上都正确。。。

相关文章：