将导航置于Twitter Bootstrap中心 [英] Center the nav in Twitter Bootstrap

问题描述

我想要能够集中一个页面的导航死中间，让它停留在不同分辨率的中心。我不想使用偏移来推它或左边距，因为这只是拧在不同的浏览器宽度。这是我讨厌的典型酒吧，但ul总是向上左对齐。

I want to be able to center the nav dead middle of a page and have it stayed centered in different resolutions. I don't want to use offsets to push it over or margin-left as this would just screw it up in different browser widths. This is the typical bar that I am messing around with but the ul always winds up left aligned.

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

推荐答案

修改twitter启动栏导航栏。
我想这是你正在寻找（复制）：

Possible duplicate of Modify twitter bootstrap navbar. I guess this is what you are looking for (copied):

.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。

As stated in the linked answer, you should make a new class with these properties and add it to the nav div.

这篇关于将导航置于Twitter Bootstrap中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！