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导航栏高度低于50px。

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

以下是HTML简化版的示例：https://jsfiddle.net/caleyshemc/ns0674mp/

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

引导程序中导航栏的最大高度

1 个答案: