javascript - Bootstrap 3居中导航在链接底部添加5个像素

Question

我已将 nav 菜单置于 Bootstrap 的中心。我注意到我的 CSS 规则在链接底部添加了 5 个像素。当菜单未被切换按钮隐藏时(宽度 > 768)，您可以突出显示它 你能帮我吗？

Fiddle

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">LINK</a></li>
                        <li><a href="#">LINK</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

CSS

.navbar .navbar-nav {
  display: inline-block;
  float: none;
}

.navbar .navbar-collapse {
  text-align: center;
}

提前致谢。

Answer 1

您只需将 vertical-align: Bottom; 添加到 .navbar .navbar-nav

jsFiddle