如何使用bootstrap 3使导航菜单项居中？

Question

我的导航栏

问题

如何让管理菜单项位于中间而不是向左下方？我正在使用从wrapbootstrap购买的模板，无法弄清楚为什么会发生这种情况。我使用firefox中的dev工具调整了很多CSS，无论我做什么，ADMIN都挂在左边。

CSS：

    <nav class="navbar navbar-default" role="navigation">
                                <div class="container-fluid">

                                    <!-- Toggle get grouped for better mobile display -->
                                    <div class="navbar-header">
                                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
                                    </div>

                                    <!-- Collect the nav links, forms, and other content for toggling -->
                                    <div class="collapse navbar-collapse" id="navbar-collapse-1">
                                        <ul class="nav navbar-nav navbar-right">
                                            <li class="active">@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { })</li>
                                            <li class="dropdown">
                                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Games</a>
                                                <ul role="menu" class="dropdown-menu">
                                                    <li>@Html.ActionLink("Results", "Index", "Results", new { area = "" }, new { })</li>
                                                    <li>@Html.ActionLink("League Table", "Index", "LeagueTable", new { area = "" }, new { })</li>
                                                </ul>
                                            </li>
                                            <li>@Html.ActionLink("Schedule", "Index", "Schedule", new { area = "" }, new { })</li>
                                            <li>@Html.ActionLink("Players", "Index", "Players", new { area = "" }, new { })</li>
                                            <li>@Html.ActionLink("News", "Index", "News", new { area = "" }, new { })</li>
                                            <li>@Html.ActionLink("Gallery", "Index", "Gallery", new { area = "" }, new { })</li>
                                            <li>@Html.ActionLink("Contact", "Contact", "Home", new { area = "" }, new { })</li>
                                            @if (Request.IsAuthenticated)
                                            {
                                                <li class="dropdown">
                                                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Admin</a>
                                                    <ul role="menu" class="dropdown-menu">
                                                        <li>@Html.ActionLink("Admin Home", "Index", "Home", new { area = "Admin" }, new { })</li>
                                                        <li>@Html.ActionLink("Games", "Index", "Games", new { area = "Admin" }, new { })</li>
                                                        <li>@Html.ActionLink("Game Types", "Index", "GameTypes", new { area = "Admin" }, new { })</li>
                                                        <li>@Html.ActionLink("News", "Index", "News", new { area = "Admin" }, new { })</li>
                                                        <li>@Html.ActionLink("Players", "Index", "Players", new { area = "Admin" }, new { })</li>
                                                        <li>@Html.ActionLink("Seasons", "Index", "Seasons", new { area = "Admin" }, new { })</li>
                                                    </ul>
                                                </li>
                                            }
                                        </ul>
                                    </div>
                                </div>
                            </nav>

Answer 1

之前我遇到过类似的问题。我缩小了字体大小。

.nav.navbar-nav.navbar-right li a {
   /*reduce font-size here*/
}

我减少了导航栏元素之间的填充。

.navbar-nav > li{
  padding-left:30px;/*reduce*/
  padding-right:30px;
}

您还可以更改边距。它也有效：

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

另一种方法是使用媒体查询：检查哪个屏幕大小的管理员下拉，并可能将一个或两个元素转换为该屏幕大小的下拉列表：例如将图库和联系人放入下拉列表中叫更多。因此，当用户点击它时，他可以选择在两者之间进行选择。