html - Bootstrap Navigation 的中心内容

Question

我正在尝试将使用 bootstrap 3 的导航内容居中。 我已经尝试了一些类似问题的建议解决方案，例如下面的 css，但很遗憾。

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

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

<nav class="navbar navbar-default navbar-fixed-top">		  	
	<ul class="nav navbar-nav">
		<li><a href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
		<li><a href="/">Mr. Postman</a></li>
		<li><a href="/profile"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
	</ul>
</nav>

Answer 1

Bootply 是查找此类内容的 Bootstrap 示例的好地方。

http://www.bootply.com/Q7pzI4ddjW

CSS:

@media(min-width:768px) {
    .center-nav{
        float: none;
        text-align: center;
    }
    .center-nav > li{
        float: none;
        display: inline-block;
    }
}

HTML:

<nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav center-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
</nav>