Twitter-Bootstrap导航栏高度太小

Question

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

Answer 1

我很确定我不喜欢这个解决方案，但是我需要花费大量时间来处理这个问题。

.navbar .container { height: 2em; }

我还必须在同一个选择器中添加一些填充顶部，以使导航栏内的内容垂直对齐。

编辑：我刚刚重新阅读了您的问题，发现您遇到了“下面的div”问题。在这样做时，您还需要调整body标签上的填充，例如

body { padding-top: 6em; }

符合Twitter Bootstrap docs on Navbar：

  

当您粘贴导航栏时，请记住要考虑隐藏区域   下。添加40px或更多的apdding到＆lt; body＆gt;。一定要添加   这是在核心Bootstrap CSS和可选响应之前   CSS。

Answer 2

  

如果你正在使用响应，那么添加这样的填充是不够的   引导。在这种情况下，当您调整窗口大小时，您将获得一个间隙   在页面顶部和导航栏之间。一个合适的解决方案如下：

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

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

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高度，在第一次点击）也许它也适合你。