8

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

4

4 回答 4

19

我很确定我不喜欢这个解决方案，但它适用于我必须花费的时间。

.navbar .container { height: 2em; }

我还必须在同一个选择器中添加一些 padding-top 以使导航栏中的内容垂直对齐。

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

body { padding-top: 6em; }

根据Navbar 上的 Twitter Bootstrap 文档：

粘贴导航栏时，请记住考虑下方的隐藏区域。向 <body> 添加 40px 或更多的 apdding。请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

于 2012-04-13T19:29:41.743 回答
6

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

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

来源： Twitter Bootstrap - 顶部导航栏阻止页面的顶部内容

于 2012-10-04T17:23:17.803 回答
1

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

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


.navbar-fixed-top {
    position:static;
    margin-bottom:20px;
    }
于 2013-01-09T07:00:13.113 回答
0 
</script>

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

</script>

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

于 2013-08-07T01:15:27.447 回答