Twitter Bootstrap 3 - Navbar固定顶部 - 多行时重叠内容

时间:2013-12-05 07:13:24

标签: javascript jquery css twitter-bootstrap twitter-bootstrap-3

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

body { padding-top: 40px; }

我有一个导航栏,无论好坏,都有大量的数据/信息。我遇到的问题是当导航栏分成多行时(完全没问题)它会重叠内容(坏)。

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

当导航栏分成多行时,是否有人有一个聪明的javascript解决方案来更改正文填充或强制折叠的方法?

更新

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

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

2 个答案:

答案 0 :(得分:9)

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

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

答案 1 :(得分:1)

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

这样的东西
@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;
    }
}

在你的小提琴上为我工作。

这个解决方案的缺点是,如果你修改了导航元素,它需要进行大量的调整和更改,并且可能很难在所有浏览器上正确使用...