[英]Twitter Bootstrap 3 - Navbar Fixed Top - Overlaps content when multiple lines
First, this is not the body padding-top issue for the fixed top navigation. 首先,这不是固定顶部导航的主体填充顶部问题。
body { padding-top: 40px; }
I've got a navbar that, for better or for worse, has a lot of data/information in it. 我有一个导航栏,无论好坏,都有大量的数据/信息。 The issue I'm having is that when the navbar breaks into multiple lines (which is perfectly fine) it overlaps the content (bad). 我遇到的问题是,当导航栏分成多行(完全没问题)时,它会重叠内容(坏)。
Here is an examples of what I'm seeing/experiencing. 以下是我所看到/经历的一个例子。 http://jsfiddle.net/jsuggs/ZaMs3/7/ http://jsfiddle.net/jsuggs/ZaMs3/7/
Does anyone have either a clever javascript solution to change the body padding or a way to force a collapse when the navbar breaks into multiple lines? 有没有人有一个聪明的JavaScript解决方案来改变身体填充或当导航栏分成多行时强制崩溃的方法?
Update 更新
Here is what I ended up using. 这是我最终使用的。 I had to add in some additional padding and combined the load and resize events. 我不得不添加一些额外的填充并组合加载和调整大小事件。
$(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"});
});
One possible solution is to use media queries to check for different widths. 一种可能的解决方案是使用媒体查询来检查不同的宽度。 Something like 就像是
@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;
}
}
worked for me on Chrome on your Fiddle. 在你小提琴上的Chrome上为我工作。
The downside to this solution is, that it needs a lot of tweaking and changing if you modifiy your navigation elements and it might be hard to get it right on all browsers... 这个解决方案的缺点是,如果你修改了导航元素,它需要进行大量的调整和更改,并且可能很难在所有浏览器上正确使用它...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.