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
 }
}

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

DEMO 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;
 }
}

DEMO 2： http://jsbin.com/iJaJAzIM/6/

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

Answer 2

如果你想建立navbar-nav中心，那么你必须玩一点。添加以下样式：

.navbar-nav {
    float: none;
    margin: 0 auto;
    display: table;
    position: relative;
    left: -135px; /* the width of the .navbar-brand class in negative px */
}

Answer 3

我发现无论何时我都无法将元素准确地与引导程序对齐，请添加一个位置：relative和left：x％;或者右：x％;并把它弄到你想要的地方。

一个例子：

<div class="navbar-collapse collapse" style="position:relative; left:{add-a-small-number-and-adjust-until-you-get-it-where-you-want-it}%;">