Bootstrap 导航的中心内容答案

【问题标题】：Center Content of Bootstrap NavigationBootstrap 导航的中心内容
【发布时间】：2015-02-27 03:25:43
【问题描述】：

我正在尝试将使用 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>

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案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>

【讨论】：

【解决方案2】：

从你的 CSS 中移除 .navbar-collapse：

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

    .navbar {
        text-align: center;
    }
}

【讨论】：