中心对齐Bootstrap中的导航栏内容

Question

我试图将导航栏链接集中在一起。但遗憾的是，到目前为止我没有太多运气。我试图使用navbar-justified，但这只会使所有事情都不成比例。

here is the code

Answer 1

我认为你想把所有东西都集中到中心。最简单的方法是在父元素上使用display: inline-block然后使用text-align: center。然后还重置float以使用默认对齐：

见最新演示：http://www.bootply.com/iu9NOXfmEV

Answer 2

使容器inline-block获取内容的宽度，并对齐navbar元素。要摆脱使用vertical-align: top下面的差距。

为了避免折叠时更改添加媒体查询：

@media (min-width: 768px) {
   .navbar {
      text-align:center;
   }
   .navbar .container-fluid {
      display: inline-block;
      vertical-align: top;
   }
}

您可以看到here