我在我的网站上使用bootstrap,导航栏固定顶部有问题。当我只是使用常规的导航栏时,一切都很好。然而,当我尝试将其切换到导航栏固定顶部时,网站上的所有其他内容都向上移动,就像导航栏不在那里一样,导航栏与其重叠。下面是我的基本布局:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图准确地复制bootstraps示例,但只有在使用导航条固定顶部时仍然存在此问题。我做错了什么?
发布于 2012-10-24 22:56:58
正如其他人所说的那样,在body中添加一个填充顶部效果很好。但是,当你将屏幕变窄(与手机宽度相当)时,导航栏和机身之间就会有一道缝隙。此外,拥挤的导航栏可能会换行为多行的栏,从而再次覆盖某些内容。
这为我解决了这些问题
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
这在默认情况下是40px的填充,当宽度小于768px时为0px (根据bootstrap的文档,768px宽度是创建间隙的手机布局截止点)
发布于 2015-06-19 06:04:10
对于你的参考来说,这是一个更方便的解决方案,它在我的所有项目中都很完美:
将您的第一行从
.navbar.navbar-fixed-top
至
.navbar.navbar-default.navbar-static-top
发布于 2013-10-17 14:50:55
@Ryan,你是对的,在自定义导航栏的情况下,硬编码高度会让它工作得很糟糕。这是我在BS 3.0.0中愉快地使用的代码:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
https://stackoverflow.com/questions/11124777
复制相似问题