2012-03-29 114 views
8

Twitter-Bootstrap中导航栏的默认高度太小。当高度增加时,会侵蚀下面的div。 如何增加滑动整个页面的导航栏的高度?如果这是可能的,如何将导航栏链接放置在导航栏的顶部/底部。Twitter-Bootstrap导航栏高度太小

+0

解决了。 在.navbar .nav中更改高度 添加了填充并给出了一个值 – Gattoo 2012-03-30 09:15:12

+0

将您的结果作为答案发布,并通过勾选绿色复选标记以使此问题关闭,从而在将来有助于其他用户的批准。 – 2012-04-02 11:55:25

+0

谢谢。我会爱别人,也许是你,做吧。 – Gattoo 2012-04-03 05:01:31

回答

19

我很确定我不喜欢这个解决方案,但它的工作量我必须花费在这个上。

.navbar .container { height: 2em; } 

我不得不在相同的选择器中添加一些填充顶部以使导航栏内部的东西能够很好地垂直对齐。

编辑:我只是重新读你的问题,看到你遇到了“下面的div”的问题。在这种情况下,你还需要调整身体标记的填充,例如

body { padding-top: 6em; } 

Twitter Bootstrap docs on Navbar

当你贴上的导航栏,记得要占隐藏区域 下方。添加40px或更多的apdding到<机身>。请务必在核心引导CSS之后以及可选的响应 CSS之前添加 。

+0

这也是一个可行的解决方案。谢谢@Chris。 – Gattoo 2012-04-20 07:00:35

6

添加像这样的填充是不够的,如果你使用的响应 引导。在这种情况下,当您调整窗口大小时,您会在页面顶部和导航栏之间产生空隙 。一个适当的解决方案是这样的:

body { 
    padding-top: 60px; 
} 
@media (max-width: 979px) { 
    body { 
    padding-top: 0px; 
    } 
} 

来源: Twitter Bootstrap - top nav bar blocking top content of the page

1

你可以试试这个。它适用于任何尺寸的显示器。

​​
0
</script> 

$(".dropdown-toggle").click(function() { 
$(".nav-collapse").css('height', 'auto') 
}); 

</script> 

这解决了我的一个类似的问题,(子菜单并没有出现因为小母UL高度,在第一次点击)也许它适用于你。