Twitter-Bootstrap导航栏高度太小

Question

Twitter-Bootstrap中导航栏的默认高度太小.当高度增加时,它会侵占下面的div.如何增加滑动整个页面的导航栏的高度？如果可以,则如何将导航栏链接放置在导航栏的顶部/底部.

Answer 1

我很确定我不喜欢这个解决方案,但它可以用于我花在这上面的时间.

.navbar .container { height: 2em; }

我还必须在同一个选择器中添加一些padding-top,以使导航栏内的内容能够很好地垂直对齐.

编辑:我只是重新阅读你的问题,看到你遇到了"下面的div"的问题.在这样做时,您还需要调整body标签上的填充,例如

body { padding-top: 6em; }

当您粘贴导航栏时,请记住考虑下面的隐藏区域.添加40px或更多的apdding到<body>.一定要在核心Bootstrap CSS之后和可选的响应式CSS之前添加它.

Answer 2

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

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