Center Bootstrap Navbar - 不明白为什么导航不会居中

Question

我刚刚开始学习bootstrap,我正在这个页面上使用他们的例子http://getbootstrap.com/examples/offcanvas/

如您所见,如果您转到该页面,则导航将向左对齐.我试图使用我在普通CSS中所做的事情,这是:

margin-right:auto 和 margin-left:auto

我也试过了

text-align:center

这些都没有用,我已经阅读了他们的导航文档,我不明白我在这里做的不同之处.

以下是该导航页面的代码.我试图将标签一次性放入所有4个导航容器中:

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header" >
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 1px;margin: auto;text-align: center;">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>

Answer 1

左侧或右侧的Bootstrap中只有两个导航方向.要使导航栏居中,有几种方法.这就是我为其中一个人所做的.以下是两个示例链接:

@media (min-width:768px) { 
/* centered navigation */
 .nav.navbar-nav {
     float: left;
 }
 .nav.navbar-nav {
     clear: left;
     float: left;
     margin: 0;
     padding: 0;
     position: relative;
     left: 50%;
     text-align: center;
 }
 .nav.navbar-nav > li {
     position: relative;
     right: 50%;
 }
 .nav.navbar-nav li {
    text-align: left
 }
}

这是上述的修改版本.我不知道你在做什么徽标.

演示1:http://jsbin.com/iJaJAzIM/3/

http://jsbin.com/iJaJAzIM/3/edit?html,css,js,output

这是另一种方法:

@media (min-width:768px) { 
 .navbar > .container {
    text-align: center;
 }
 .navbar-header {
    float: none;
    display: inline-block;
 }
 .navbar-brand {
    float: none;
    display: inline-block;
 }
 .navbar .navbar-nav {
    float: none;
    display: inline-block;
    clear: none;
 }
 .navbar .navbar-nav > li {
    float: none;
    display: inline-block;
 }
 .navbar .navbar-nav > li li {
    text-align: left
 }
 /*add id of centerednav on the collapse or it won't work*/
 .collapse.navbar-collapse#centerednav {
    float: none;
    display: inline-block!important;
    width: auto;
    clear: none;
 }
}

演示2: http://jsbin.com/iJaJAzIM/6/

http://jsbin.com/iJaJAzIM/6/edit