twitter bootstrap导航栏修复顶部重叠站点
twitter bootstrap导航栏修复顶部重叠站点
提问于 2012-06-21 01:17:20
我在我的网站上使用bootstrap，导航栏固定顶部有问题。当我只是使用常规的导航栏时，一切都很好。然而，当我尝试将其切换到导航栏固定顶部时，网站上的所有其他内容都向上移动，就像导航栏不在那里一样，导航栏与其重叠。下面是我的基本布局：
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content我试图准确地复制bootstraps示例，但只有在使用导航条固定顶部时仍然存在此问题。我做错了什么？
回答 14
Stack Overflow用户
发布于 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宽度是创建间隙的手机布局截止点)
Stack Overflow用户
发布于 2015-06-19 06:04:10
对于你的参考来说，这是一个更方便的解决方案，它在我的所有项目中都很完美：
将您的第一行从
.navbar.navbar-fixed-top至
.navbar.navbar-default.navbar-static-topStack Overflow用户
发布于 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);
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11124777
复制相关文章
相似问题