如何使 Bootstrap 导航项居中答案

【问题标题】：How to center Bootstrap navigation items如何使 Bootstrap 导航项居中
【发布时间】：2015-11-01 20:58:43
【问题描述】：

我似乎无法弄清楚如何使导航项居中。我可以把它们放在左边或右边，但不能放在中间。有没有简单的解决方法？

  <!-- Navigation -->
  <div class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Mobile navigation button --> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>   
      </button>
      <!-- Navigation items -->
      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
          <li><a href="#">OUR PRODUCTS</a></li>
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">OUR TEAM</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>  
    </div>
  </div>

我尝试了一些方法，但它们有点草率，并导致移动版本出现一些问题。我正在寻找更合适的东西。

【问题讨论】：

我的尝试：jsfiddle.net/miparnisari/vgdg30Lp
@UnknownOctopus 这都是引导程序。我用一些不起作用的自定义 CSS 尝试了一些方法。
这个帖子应该有帮助：stackoverflow.com/questions/10568103/…
给你，jsfiddle.net/kog04xsg/1
@Shehary 这似乎没有做任何事情。

标签： html css twitter-bootstrap

【解决方案1】：

我相信你忘记添加或编辑了。

在你的 Bootstrap.css 上找到这个类并在 text-align:center 上编辑。这将使您的文本导航栏居中。

.navbar.navbar-collapse{

text-align: center;

}

如果你还是不明白。你可以看看我在 Bootply 上做的例子。

HTML

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <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 navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">OUR PRODUCTS</a></li>
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">OUR TEAM</a></li>
          <li><a href="#">CONTACT</a></li>

        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>

 </div>

CSS

   @media (min-width: 620px) {
        .navbar .navbar-nav {
            display: inline-block;
            float: none;
        }

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

DEMO

【讨论】：

【解决方案2】：

试试这个

.navbar-nav {
    width: 100%;
    text-align: center;
}

.navbar-nav > li
{
    float: none;
    display: inline-block;
}
.navbar-nav > li a{
    text-decoration:none;
    padding-left:15px;
}

【讨论】：

【解决方案3】：

您还可以通过 flexbox 使用一些自定义 CSS。

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    float: none; // overwrites Bootstrap's float value
}

【讨论】：

【解决方案4】：

1) 使用<ul class="nav nav-justified"... 作为菜单容器。

2) 看看这个codepen 来源：

.navbar-nav {
    width: 100%;
    text-align: center;
}

.navbar-nav > li
{
    float: none;
    display: inline-block;
}

3) 阅读答案right there

有三种不同的方式来做你想做的事情，选择一个。

你很容易找到你的答案，下次请尝试自己做，兄弟。

【讨论】：