CSS Twitter-Bootstrap 导航栏高度太小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9923739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter-Bootstrap navbar height too small
提问by Gattoo
The default height of navbar in Twitter-Bootstrap is too small. When height is increased, it encroaches the divs below. How can I increase the height of the navbar that slides the entire page down? If this is possible, how to place navbar links to top / bottom of the navbar.
Twitter-Bootstrap 中导航栏的默认高度太小。当高度增加时，它会侵占下面的div。如何增加向下滑动整个页面的导航栏的高度？如果可能，如何将导航栏链接放置到导航栏的顶部/底部。
回答by Chris
I'm pretty sure I don't love this solution but it works for the amount of time I have to spend on this.
我很确定我不喜欢这个解决方案，但它适用于我必须花费的时间。
.navbar .container { height: 2em; }
I had to also add some padding-top in the same selector to get things inside the navbar to vertically align nicely.
我还必须在同一个选择器中添加一些 padding-top 以使导航栏中的内容垂直对齐。
edit: I just re-read your question and saw you're having trouble with the "divs below". In doing this you need to adjust padding on the body tag as well, e.g.
编辑：我刚刚重新阅读了您的问题，发现您在使用“下面的 div”时遇到了问题。在这样做时，您还需要调整 body 标签上的填充，例如
body { padding-top: 6em; }
per the Twitter Bootstrap docs on Navbar:
根据Navbar 上的Twitter Bootstrap 文档：
When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
粘贴导航栏时，请记住考虑下方的隐藏区域。向 <body> 添加 40px 或更多的 apdding。确保在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。
回答by jpillora
Adding a padding like that is not enough if you're using responsive bootstrap. In this case when you resize your window you'll get a gap between top of the page and navbar. A proper solution looks like this:
如果您使用响应式引导程序，添加这样的填充是不够的。在这种情况下，当您调整窗口大小时，页面顶部和导航栏之间会出现间隙。正确的解决方案如下所示：
body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Source: Twitter Bootstrap - top nav bar blocking top content of the page
回答by Faisal Khan Samrat
you can try this one. it works in any size of display.
你可以试试这个。它适用于任何尺寸的显示器。
.navbar .container { min-height: 83px; }
.navbar-fixed-top {
position:static;
margin-bottom:20px;
}
回答by Ceren Ak?n
</script>
$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});
</script>
This solved a similar problem of mine, (The sub menus was not appearing because of the small parent ul height, on the first click) maybe it works for you as well.
这解决了我的类似问题，（由于父 ul 高度小，第一次单击时子菜单没有出现）也许它也适用于您。
