调整 Bootstrap 下拉菜单高度

Question

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

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

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

关于如何解决这个问题有什么建议吗？

Answer 1

您需要在 css:

中直接定位 child

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

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

Answer 2

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

下拉菜单 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;
}

编码愉快:)

调整 Bootstrap 下拉菜单高度

Adjusting Bootstrap dropdown menu height

html

css

height

navbar

twitter-bootstrap-3