Bootstrap上的下拉菜单未调整为新的Navbar高度

时间:2014-05-17 19:23:48

标签: html css twitter-bootstrap twitter-bootstrap-3

我已经通过更改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;
}

工作正常。到现在为止还挺好。

但是,我的导航栏上有一个Dropdown,这是我遇到问题的地方。当用户点击下拉列表时,它会按预期工作,除非它下降的高度不正确。它只下降了正常的50px而不是下降63px。

以下是问题的图片:

Picture shoring dropdown problem

有关如何解决此问题的任何建议?我搜索了Bootstrap.css文件,但无法确定导致此问题的原因或解决方法。

2 个答案:

答案 0 :(得分:1)

the website下载引导程序时,您可以对其进行自定义,并且可以将导航栏高度从50px更改为63px。链接到它的每个其他功能都会自动更改并正常工作,包括您的下拉列表。

以下是您需要的网址:http://getbootstrap.com/customize/#navbar。直接从他们的网站生成引导程序比在本地编辑引导程序更好。我们也不建议您修改bootstrap.jsbootstrap.css;相反,您应该使用单独的文件覆盖引导程序文件,例如mystyle.cssmyscript.js您需要在引导程序文件之后加载。

答案 1 :(得分:1)

好的,我自己解决了这个问题。我不得不稍微改变线高。为此,请将引导程序文件更改为以下内容:

.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  */
 }