调整 Bootstrap 下拉菜单高度答案

【问题标题】：Adjusting Bootstrap dropdown menu height [closed]调整 Bootstrap 下拉菜单高度
【发布时间】：2015-03-14 19:41:37
【问题描述】：

我的问题是我无法在 bootstrap 中调整下拉菜单的高度。

我希望导航栏中的高度为 75 像素，以便我的徽标适合菜单，但我希望将下拉菜单高度保持在 50 像素，并保持标准行高和所有内容。

这是我的问题的链接：http://www.bootply.com/zeYJxjO62s

关于如何解决此问题的任何建议？

【问题讨论】：

标签： html css twitter-bootstrap-3 height navbar

【解决方案1】：

我遇到了非常相似的问题，我的最终解决方案如下所述。这样做的好处是它不仅适用于导航栏，而且通常适用于您想要使用它的任何地方。

一个下拉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>

要使标准下拉列表的高度尺寸更薄，只需将其放入您的 css 文件（通常是 /Content/Site.css）中：

.dropdown-thin a {
    height: 25px;
    padding-top: 2px;
}

编码愉快:)

【讨论】：

【解决方案2】：

您需要在您的 css 中定位直接子对象：

.navbar-brand, .navbar-nav > li > a {
    line-height: 100px;
    height: 75px;
    padding-top: 0px;
}

不是.navbar-nav li a，因为这会影响导航栏中的所有链接。

【讨论】：

问题是我希望下拉菜单中的项目为 50px 高度，引导导航栏和下拉菜单的标准高度为 50px，当我定位 .navbar-nav li a 并设置高度为 75px，所以我的徽标适合导航栏我的下拉项也有 75px 高度，但我希望下拉项的高度为 50px....我应该更改 .dropdown-menu 的 CSS，但我不知道哪个 CSS我需要更改的规则：/
这应该可以解决您的问题.dropdown-menu > li > a { height: 50px; }