在Twitter中心导航引导程序

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

的Modify twitter bootstrap navbar可能的复制。 我想这是你在找什么（复制）：

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

正如联回答说，你应该做一个新的类具有这些属性，并将其添加到导航股利。

Answer 2

可以使.navbar固定的宽度，然后设置它的左，右边距为auto。

Demo

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

Answer 3

对于任何需要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 4

http://www.bootply.com/3iSOTAyumP在此实例中为collap按钮se因为.navbar品牌在前面，所以无法点击。

http://www.bootply.com/RfnEgu45qR有一个更新版本，其中的折叠按钮实际上是可点击的。

Answer 5

.navbar-right { 
    margin-left:auto; 
    margin-right:auto; 
    max-width :40%; 
    float:none !important; 
} 

只是复制此代码，并改变max-width只要你喜欢

Answer 6

我更喜欢这样的：

<nav class="navbar"> 
    <div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div"> 
    <!-- this element is on the center of the nav, visible only on -md and -lg --> 
    <a></a> 
    </div> 

    <div class="container-fluid"> 
    <!-- ...things with your navbar... --> 
     <div class="visible-xs visible-sm"> 
     <!-- this element will be hidden on -md and -lg --> 
     </div> 
    <!-- ...things with your navbar... --> 
    </div> 
</nav> 

元素被完全集中，并且将在一些屏幕尺寸隐藏（没有例如，将其留在-xs和-sm上）。我的想法来自Twitter的实际导航栏

Answer 7

代码使用的基本导航引导

<!--MENU CENTER`enter code here` RESPONSIVE --> 
 

 
    <div class="container-fluid"> 
 
     <div class="container logo"><h1>LOGO</h1></div> 
 
     <nav class="navbar navbar-default menu"> 
 
     <div class="container-fluid"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="defaultNavbar2"> 
 
      <ul class="nav nav-justified" > 
 
       <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> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
     </nav> 
 
    </div> 
 
    <!-- END MENU-->

Answer 8

对于引导V4检查：

https://v4-alpha.getbootstrap.com/components/pagination/#alignment

只添加类UL .pagination：

<nav"> 
    <ul class="pagination justify-content-center"> 
    <li class="page-item disabled"> 
     <a class="page-link" href="#" tabindex="-1">Previous</a> 
    </li> 
    <li class="page-item"><a class="page-link" href="#">1</a></li> 
    <li class="page-item"><a class="page-link" href="#">2</a></li> 
    <li class="page-item"><a class="page-link" href="#">3</a></li> 
    <li class="page-item"> 
     <a class="page-link" href="#">Next</a> 
    </li> 
    </ul> 
</nav>