Question

我有一个非常简单的导航栏：

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header pull-left">
            @Html.ActionLink("Contacts", "Contacts", "Home", null, null, null, new { area = "" }, new { @class = "navbar-brand customclass" })
            @Html.ActionLink("Home", "Index", "Home", null, null, "anchor", new { area = "" }, new { @class = "navbar-brand" })
        </div>

        <div class="navbar-header pull-right">
            <ul class="nav navbar-nav pull-left">
                <li style="padding-right:20px"><button type="button" class="btn btn-success navbar-btn" data-toggle="modal" data-target="#register"><span class="glyphicon glyphicon-ok"></span>text</button></li>
            </ul>
        </div>
    </div>
</nav>

因此，当我的屏幕低于768时，导航栏高度从51变为66并且导航栏看起来不再漂亮（因为按钮移位以便它保持在中心，但链接不会），所以我理解我基本上必须用各种媒体查询来覆盖它，但我不明白如何。我尝试将高度设置为51并且dkinda工作（仅对于导航栏高度，按钮稍微移位，尝试与导航栏的中心对齐，好像它是66px，或者可能是填充\ margin应用，但我无法找到说填充\边距）。

所有类都是未经修改的引导程序，我只应用自己的类来制作第一个链接（在导航栏中）。

Answer 1

设置导航栏高度不是正确的方法。它会扩展，因为在菜单列表上应用了边距：

.navbar-nav {
    margin: 7.5px -15px;
}

您可以像这样覆盖：

.navbar-nav {
    margin: 0 -15px;
}

<强> Fiddle

不需要媒体查询，因为这适用于最小的断点。 Bootstrap CSS应用于“移动优先”。

介质宽度时，导航栏高度会增加

1 个答案: