在Twitter Bootstrap中居导航

Question

我希望能够将导航停在页面的中间位置并使其保持在不同分辨率的中心位置.我不想使用偏移来推动它或边缘左边,因为这会在不同的浏览器宽度中将其搞砸.这是我正在搞乱的典型酒吧但是ul总是在左边对齐.

     <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
           <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse">
                     <ul class="nav">
                          <li class="active"><a href="#">Menu</a></li>
                          <li><a href="#">On Tap</a></li>
                          <li><a href="#">Shows</a></li>
                          <li><a href="#">Surfwear</a></li>
                          <li><a href="#" >Contact</a></li>
                     </ul>
                </div><!--/.nav-collapse -->
           </div><!-- container -->
      </div><!-- navbar-inner -->
 </div><!--  navbar navbar-fixed-top -->

Answer 1

修改twitter bootstrap导航栏的可能重复.我想这就是你要找的东西(复制):

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
}

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

如链接答案中所述,您应该使用这些属性创建一个新类,并将其添加到nav div.

Answer 2

对于任何需要Bootstrap 3的人来说,它现在变得更加容易.

新nav-justified类可用于居中所有导航栏链接.

http://www.bootply.com/g3g125MLGr

<div class="navbar">
  <ul class="nav nav-justified" id="myNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

或者使用一点CSS,您可以将品牌/徽标集中在一起,并将左/右链接分开.

http://www.bootply.com/3iSOTAyumP

Answer 3

您可以.navbar设置固定宽度,然后将其左右边距设置为auto.

演示

.navbar{
    width: 80%;
    margin: 0 auto;
}?