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

css - 中心导航栏链接，而不是
文本

转载作者：太空宇宙更新时间：2023-11-04 11:42:31

25

4

我有这个 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>

现在，如果将页面大小调整为 768 像素，我的管理导航栏元素会下降到左侧，我希望它集中。

谢谢。

编辑:呈现的 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 -->

最佳答案

在媒体查询中定位导航栏内的链接(最大宽度:768px)。

输出:

Centered Navbar

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

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

关于css - 中心导航栏链接，而不是 <li> 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31218611/

25

4

0

文章推荐： C++ Opengl BMP 如何设法从 header 中提取宽度和高度？

文章推荐： java - 使用 JTA 和 JPA EntityManager 关闭自动事务启动

文章推荐： java - GraphStream - 使用 netstream 的问题

Javascript 函数创建它自己的

，但在此过程中删除网页上的所有其他

好吧，标题说明了一切。我的 javascript 函数构建一些“ block ”并使用和创建它们。问题是，它删除了所有其他在网页上。编辑:(好吧，我假设这个函数是造成这个的原因。删除我的意思是

html - 这个 HTML 结构有效吗？ UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }
这个 HTML 结构有效吗？ Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
html - 这个 HTML 有效吗？
- 新闻卷
- 新闻1
- 新闻2
我正在尝试在 UL 中添加标题因为你不能在 UL 中使用 H2如果按照我展示的方式使用它可以吗？ News roll News 1 News 2 我的一位 friend 告诉我
css -

的图片大于 16*16 时，如何将

的图片与其文字对齐？

这是我的代码风格。 li{ font-family: Arial, sans-serif; font-size: 100%; color: black; display : list-item;

html - 使用 li + li 作为导航分隔符会清除第一项后的
背景
我正在使用 a 进行水平导航，感谢问题:Separators For Navigation ，我读到了使用 li + li 设置基于图像的元素分隔符的好方法。 (伪？)选择器。在我的代码中，我为
javascript - 如何在将
附加到
组中时滚动
我有一个 Div 容器，其中包含 4 我正在做的是在前面加上进入并删除最后一个我很容易使用 $('#news-ul li:last').remove() $('#news-ul').prepe
jQuery 将类添加到当前 li 并在 li a 中单击时删除上一个 li
这是 html: menu item menu item menu item menu item menu item 如果我按“a”链接，它会将“当
css - 如何在具有不同 li 类的 ul-li 列表中获取特定类的最后一个 li
我有 ul-li 列表 1 2 3 A B 我可以在列表中使用纯 css 最后一个选择器“.digit”吗？ .digit 的数量未知 ul li.digit:nth-last-ch
javascript - 如何通过单击位于该 li 内部的跨度内的相应图标来删除
或选中/取消选中
？
我有这种情况，1- 我想删除一个带有两个图标的 li，它作为一个跨度在里面:一个是选中或取消选中相应的 li，另一个是删除那个 li。2- 我还想通过单击图标(选中图标)同时单击 li 来选中或取消选
javascript - ul li a affecting ul li ul li a
如果标题不好理解，我来解释一下... 我有一个 css/jquery 切换菜单。按“+”号时它变大，按“-”号时它变小。我使几个元素的填充、边距和高度在切换/单击时发生变化。菜单顶部充满了链接，然后当
html - CSS 替代 li :has(+ . class) 关系伪类和 li :not(. class ~ li)
我有一个脚本 ( JsFiddle here ) 检测 li block 元素何时在页面上垂直居中并为其分配一个 .centered 类以使其更大通过 CSS。 .centered { hei
javascript - 点击任何 li 项目后 ul li 下拉菜单不会显示 li 项目
代码在这里:http://jsfiddle.net/C5mTf/49/我不知道为什么。下面的代码有问题吗？ $("#menu").on('click','li',function (){ va
html - 当我使用
- 我为这个问题苦苦挣扎了几个小时，但仍然无法解决问题。我有这样的 html 代码: aaaa11 bbbb11 我想知道如何使用 css 让每里一行显示。但是标签仍然具有垂
- html - 如何溢出 3 级深度菜单 ul > li > ul > li > ul > li
  我需要使用水平缩放的 ul > li > ul 的组合来创建一个菜单。每个 ul 都应该有一个 max-height 并在溢出时滚动。悬停在 li 上时，如果里面有另一个 ul 标签，它应该会在右侧打
- css - 我应该如何正确地引用 CSS 中的
- ，例如ul > li 或者只是 ul li
  我了解到，如果我指的是在内或在 CSS 中我应该使用 ol > li或 ul > li但是一旦我忘记在 ol 和 li 之间放置标志，我发现它仍然有效。执行此操作的正确方法是什么？最佳答案
- jquery - 如何使用Jquery删除最后一个
- javascript -
- html - LI 内浮 LI
  我在使用代码编辑器时遇到了问题所以就在这里 Item1 Item 1.1 Item 1.2 Item2
- css -
- 不下推后续
- 我正在为我的网站创建响应式移动版本。正如您在此 jsfiddle 中看到的那样, 当用户将鼠标悬停在上时项，菜单打开但覆盖了而不是展开菜单。我已经添加了 display: block在不同的地
- html - LI 内的链接未覆盖整个 LI
  我正在尝试创建一个网站，但我偶然发现了一个小问题，我正在使用 bootsnipp(一个侧面菜单)中的一个片段，我无法让它工作，所以链接将覆盖整个 LI，而不是你必须按自己的文字如果我改变它，那么它会坐

首页

博学

6Ren·AI

商城

css - 中心导航栏链接，而不是
文本

首页

博学

6Ren·AI

商城

css - 中心导航栏链接，而不是 文本

css - 中心导航栏链接，而不是
文本