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;
  }
}

Answer 3

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

.navbar .container { min-height: 83px; }


.navbar-fixed-top {
    position:static;
    margin-bottom:20px;
    }

Answer 4

</script>

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

</script>

这解决了我的一个类似的问题，（子菜单没有出现，因为小的父级ul高度，在第一次点击）也许它也适合你。