html - Bootstrap 中导航栏的最大高度

Question

我正在尝试缩小导航栏的高度，使其不会因某些屏幕尺寸或在导航栏中添加额外文本而扩展(高度)。

这是我的 html:

    <div class="navbar navbar-inverse navbar-fixed-top" id="navbar-site">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Website Name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse navbar-options">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Link", "Link", "Link")</li>
                <li>@Html.ActionLink("Link", "Link", "Link")</li>
                <li>@Html.ActionLink("Link", "Link", "Link")</li>
                <li>@Html.ActionLink("Link", "Link", "Link")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

我的 CSS:

#navbar-site {
    height: 15px;
}

我已经尝试将高度和最大高度 css 添加到我的导航栏，但仍然没有成功。

更新:这是我在 bootply 上遇到的问题的运行版本。请注意当窗口变小、高度增加并且链接位于下方时会发生什么。

Answer 1

您需要做两件事才能使 Bootstrap 3 导航栏的高度小于 50 像素。

1. 将 .navbar 高度和最小高度设置为您想要的高度。
2. 从导航栏内的元素中删除任何不需要的填充/边距。

这是一个简化版 HTML 的示例:https://jsfiddle.net/caleyshemc/ns0674mp/

请注意，您还必须缩小 LoginPartial 中的任何内容。