Bootstrap中的下拉菜单无法适应新导航栏高度

Question

我通过更改bootstrap.css文件中的一行代码，将我的网站导航栏的大小从50px改为63px。以下是我使用的代码：

.navbar {
     position: relative;
     min-height: 63px; /* Changing this from 50px to 63px to fit logo **NOTE TO SELF**/
     margin-bottom: 20px;
     border: 1px solid transparent;
}

它运行良好。到目前为止，一切都很好。

然而，我的导航栏上有一个下拉菜单，这就是我遇到问题的地方。当用户单击下拉菜单时，它按预期工作，除了下拉高度不正确。它仅下降正常的50像素，而不是下降63像素。

以下是问题的图片：

任何关于如何修复这个问题的建议吗？我已经搜索了Bootstrap.css文件，无法确定是什么原因或如何修复它。

- Zach Cook

---

你能给我们提供一个链接吗？有时候像这样的菜单会受到外部因素的影响，谢谢！ - Steven

创建一个 JSFiddle 或者发布你的一些代码。最好是个 Fiddle。 - Dev Man

Answer 1

好的，我自己解决了问题。我必须稍微改变行高。为此，将bootstrap文件修改为以下内容：

.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 40px; /* <<< CHANGE LINE HEIGHT */
 /* your code will probably require a slightly different change to line height,
   basically, line height will need to be about 20-22px less than
   your navbar's height  */
 }

- Zach Cook

Answer 2

当你从网站下载bootstrap时，你可以自定义它，然后你可以将导航栏高度从50px更改为63px。与之相关的所有其他功能都会自动更改并正常工作，包括下拉菜单。

这是你需要的网址：http://getbootstrap.com/customize/#navbar。最好直接从他们的网站生成你的bootstrap，而不是像你一样在本地编辑它。也不建议编辑bootstrap.js或bootstrap.css；相反，你应该用你自己的文件覆盖bootstrap文件，例如mystyle.css或myscript.js，你需要在bootstrap文件之后加载它们。

- paulalexandru