Question

我有这个bootstrap导航栏，我从我购买的wrapbootstrap作为模板的一部分。我可以创建<li>文本中心，但这不是我需要的。我需要能够在调整页面大小（@media 768px）时将导航栏项目居中，但无法弄清楚。

这是我的导航栏：

<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", "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>

现在，如果页面调整为768px，我的管理员导航栏项目会向左移动，我更喜欢将其集中化。

感谢。

编辑：呈现HTML：

<!-- navbar start -->
                                <!-- ================ -->
                                <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"><a href="/">Home</a></li>
                                                <li class="dropdown">
                                                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Games</a>
                                                    <ul role="menu" class="dropdown-menu">
                                                        <li><a href="/Results">Results</a></li>
                                                        <li><a href="/LeagueTable">League Table</a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="/Schedule">Schedule</a></li>
                                                <li><a href="/Players">Players</a></li>
                                                <li><a href="/News">News</a></li>
                                                <li><a href="/Gallery">Gallery</a></li>
                                                <li><a href="/Home/Contact">Contact</a></li>
                                                    <li class="dropdown">
                                                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Admin</a>
                                                        <ul role="menu" class="dropdown-menu">
                                                            <li><a href="/Admin/Home">Admin</a></li>
                                                            <li><a href="/Admin/Games">Games</a></li>
                                                            <li><a href="/Admin/GameTypes">Game Types</a></li>
                                                            <li><a href="/Admin/News">News</a></li>
                                                            <li><a href="/Admin/Players">Players</a></li>
                                                            <li><a href="/Admin/Seasons">Seasons</a></li>
                                                        </ul>
                                                    </li>
                                            </ul>
                                        </div>
                                    </div>
                                </nav>
                                <!-- navbar end -->

Answer 1

在媒体查询(max-width: 768px)内定位导航栏内的链接。

<强>输出：

Centered Navbar

＆＃13;

@media (max-width: 768px) {
  .navbar-default .navbar-nav > li > a {
    text-align: center;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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"><a href="/">Home</a>
        </li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Games</a>
          <ul role="menu" class="dropdown-menu">
            <li><a href="/Results">Results</a>
            </li>
            <li><a href="/LeagueTable">League Table</a>
            </li>
          </ul>
        </li>
        <li><a href="/Schedule">Schedule</a>
        </li>
        <li><a href="/Players">Players</a>
        </li>
        <li><a href="/News">News</a>
        </li>
        <li><a href="/Gallery">Gallery</a>
        </li>
        <li><a href="/Home/Contact">Contact</a>
        </li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Admin</a>
          <ul role="menu" class="dropdown-menu">
            <li><a href="/Admin/Home">Admin</a>
            </li>
            <li><a href="/Admin/Games">Games</a>
            </li>
            <li><a href="/Admin/GameTypes">Game Types</a>
            </li>
            <li><a href="/Admin/News">News</a>
            </li>
            <li><a href="/Admin/Players">Players</a>
            </li>
            <li><a href="/Admin/Seasons">Seasons</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

中心导航栏链接，而不是<li>文本

1 个答案: