Question

我有一个简单的粘性导航栏，我试图将菜单项放在左侧，中间和右侧。我找到了navbar-right和navbar-left的bootstrap文档。这两个都很好，但是如果我想在中间找到一些东西，我就无法在bootstrap库中找到一个术语/变量。我还尝试将align =“center”添加到li和标签中。我是否可以在引导导航中调用中心菜单项，或者是否必须使用css对齐手动编辑？

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

Answer 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

使用boostrap导航栏

1 个答案: