Bootstrap：如何使导航栏中的部分项目居中显示

Question

我想要一个Bootstrap导航栏，其中一些导航项左对齐，一些右对齐，其余空间中心对齐。

我想要一个Bootstrap导航栏，其中一些导航项左对齐，一些右对齐，其余空间中心对齐。

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a>Left</a></li>
        </ul>
        <ul class="nav nav-center">
            <li><a>Center 1</a></li>
            <li><a>Center 2</a></li>
        </ul>
        <ul class="nav pull-right">
            <li><a>Right</a></li>
        </ul>
    </div>
</div>

这个 jsfiddle http://jsfiddle.net/b7whs/ 显示了这样一个情况——我希望将 Center 1 和 Center 2 导航项放在一起，居中显示在导航栏中。这个有可能吗？

在SO上有很多关于如何实现此功能的建议；但是它们都对我无效。这有可能吗？

在我的情况下，左右两侧的内容始终具有相同的大小，因此我认为应该是可行的。

- denishaskin

Answer 1

你只需要加入几个样式就能实现我认为你想要的效果。看起来你是使用 display:inline-block 的方式来使元素居中，所以我会沿用这种方法。在你现有的样式中，添加/修改定义以包括以下样式：

.nav.nav-center {
    margin:0;
    float:none;
}

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

通过这样做，这两个选项应该移动到导航栏的正中心。这里有一个JSFiddle示例，展示了这是什么样子。希望这就是您要找的！如果不是，请告诉我，我很乐意提供更多帮助。

- Serlite

---

这正是我所需要的（你在jsfiddle中的内容）。我曾经接近几次，但从未完全拥有。太棒了。 - denishaskin

太好了！我很高兴能帮助到你。 - Serlite

这对我来说也将左侧块拉到了中心。 - Tom

Answer 2

今天我自己找到了解决方案。只需添加以下CSS：

```CSS ```

/* center the navbar*/
.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

.center .dropdown-menu {
    text-align: left;
}

并将中心类添加到导航栏，如下所示

<div class="navbar navbar-inverse navbar-fixed-top center">
  <div class="navbar-inner">
    <div class="container center">
      ----
    </div>
  </div>
</div>

- Mushi

Answer 3

在Bootstrap中使用此CSS，li和ul都是向左浮动的。 http://jsfiddle.net/b7whs/4/

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.nav.nav-center {
    display: inline-block;
    left: 0;
    right: 0;
    text-align:center;width:70%;
}
.nav.nav-center li,.nav.nav-center li  a{display:inline;float:none;line-height:40px;}

- Hushme

Answer 4

添加以下代码

<div class="col-lg-4 col-lg-offset-5 col-xs-2 col-xs-offset-4"> <ul class=" nav navbar-nav "> <li><a href="#">产品</a></li> </ul> </div>

- Govan