使用引导导航栏居中菜单项

Posted 2023-03-29

【中文标题】使用引导导航栏居中菜单项

【英文标题】：Centering menu items with boostrap navbar

【发布时间】：2016-06-17 09:34:26

【问题描述】：

我有一个简单的粘性导航栏，我试图将菜单项放在左侧、中间和右侧。我找到了带有 navbar-right 和 navbar-left 的引导文档。这两个都很好用，但是如果我想要一些东西在中间，我在引导库中找不到这样做的术语/变量。我还尝试将 align="center" 添加到 li 和 a 标签。我可以调用一些特定的东西来将引导导航中的菜单项居中，还是我必须使用 css align 手动编辑？

    <!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#"> pushed left by default? </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar" align="center">
        <li class="active"><a href="#">pushed left by default?</a></li>
        <li><a href="#">center this part  </a></li>
        <li><a href="#">and this too  </a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">right </a></li>
        <li><a href="#"> right</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

【参考方案1】：

我将此链接作为重复链接发布 - Center content in responsive bootstrap navbar，但我意识到答案不适用于 navbar-right。

尝试在您想要居中的导航栏导航上创建/添加navbar-center 类。

<ul class="nav navbar-nav navbar-center" align="center">
    <li class="active"><a href="#">pushed left by default?</a></li>
    <li><a href="#">center this part  </a></li>
    <li><a href="#">and this too  </a></li>
</ul>

然后添加以下 CSS：

.navbar-center 
    display: inline-block;
    float: none;


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

JSFiddle Here

【讨论】：

是的，这正是我正在寻找的，很惊讶没有太多关于这方面的文档，再次感谢！

@BenjaminCasalino 我同意。代表 Bootstrap 的创建者很愚蠢的是，有一个 navbar-left 和一个 navbar-right，但没有 navbar-center。完全没有问题！