Question

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

我希望导航栏中的高度为75px，因此我的徽标适合菜单，但我想保持下拉菜单高度为50px，标准行高和所有内容。

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

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

Answer 1

你需要在你的css中定位直接孩子：

.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下拉菜单高度

2 个答案: