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

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

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

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

请注意，您还必须使 LoginPartial 中的内容更小。