我已经通过更改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。
以下是问题的图片:
有关如何解决此问题的任何建议?我搜索了Bootstrap.css文件,但无法确定导致此问题的原因或解决方法。
答案 0 :(得分:1)
从the website下载引导程序时,您可以对其进行自定义,并且可以将导航栏高度从50px更改为63px。链接到它的每个其他功能都会自动更改并正常工作,包括您的下拉列表。
以下是您需要的网址:http://getbootstrap.com/customize/#navbar。直接从他们的网站生成引导程序比在本地编辑引导程序更好。我们也不建议您修改bootstrap.js
或bootstrap.css
;相反,您应该使用单独的文件覆盖引导程序文件,例如mystyle.css
或myscript.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 */
}