![](/img/trans.png)
[英]Bootstrap Navbar-fixed-bottom div overlaps JS rendered content
[英]Twitter Bootstrap 3 - Navbar Fixed Top - Overlaps content when multiple lines
首先,这不是固定顶部导航的主体填充顶部问题。
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"});
});
一种可能的解决方案是使用媒体查询来检查不同的宽度。 就像是
@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上为我工作。
这个解决方案的缺点是,如果你修改了导航元素,它需要进行大量的调整和更改,并且可能很难在所有浏览器上正确使用它...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.