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>

Answer 2

从你的css中删除.navbar-collapse：

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

    .navbar {
        text-align: center;
    }
}

Bootstrap导航的中心内容

2 个答案: