Html 调整 Bootstrap 下拉菜单高度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27979939/
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
Adjusting Bootstrap dropdown menu height
提问by RaM
My problem is that I can't adjust the height of the dropdown menu in bootstrap.
我的问题是我无法在 bootstrap 中调整下拉菜单的高度。
I want the height in the navbar to be 75px so my logo fits in the menu, but I want to keep the dropdown menu height 50px with it's standard line-height and everything.
我希望导航栏中的高度为 75 像素,以便我的徽标适合菜单,但我希望下拉菜单的高度为 50 像素,它是标准行高和所有内容。
Here is the link of my problem: http://www.bootply.com/zeYJxjO62s
这是我的问题的链接:http: //www.bootply.com/zeYJxjO62s
Any suggestions on how to fix this?
对于如何解决这个问题,有任何的建议吗?
回答by Morpheus
You need to target direct child in your css:
你需要在你的 css 中定位直接孩子:
.navbar-brand, .navbar-nav > li > a {
line-height: 100px;
height: 75px;
padding-top: 0px;
}
Not .navbar-nav li a
as this affects alllinks inside your navbar.
不会.navbar-nav li a
因为这会影响导航栏中的所有链接。
回答by Dzik
I had quite similar problem and i the final solution was as the description below. Nice thing about this is that it work not only for navbar but in general wherever you would want to use it.
我有非常相似的问题,我的最终解决方案如下所述。这样做的好处是它不仅适用于导航栏,而且通常适用于您想要使用它的任何地方。
A dropdown html example:
一个下拉 html 示例:
<div class="dropdown-thin">
<div class="btn-group">
<a class="btn btn-primary" href="#">CLICK HERE...</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down" title="Click to toggle..."></span>
</a>
<ul class="dropdown-menu">
<li><a href="/action/one/@Model.Id">ONE</a></li>
<li><a href="/action/two/@Model.Id">TWO</a></li>
<li class="divider"></li>
<li><a href="/action/last/@Model.Id">Last</a></li>
</ul>
</div>
</div>
To make the standard dropdown list thinner in height dimension just put it in your css file (usually /Content/Site.css) this:
要使标准下拉列表的高度维度更薄,只需将其放入您的 css 文件(通常是 /Content/Site.css)中:
.dropdown-thin a {
height: 25px;
padding-top: 2px;
}
Happy coding :)
快乐编码:)