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