Bootstrap: trung tâm một số thanh điều hướng

Question

Tôi muốn có thanh điều hướng bootstrap nơi một số mục nav được căn lề trái, một số được hợp lý và một số được căn giữa trong khoảng trống còn lại giữa chúng.

<div class="navbar"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li><a>Left</a></li> 
     </ul> 
     <ul class="nav nav-center"> 
      <li><a>Center 1</a></li> 
      <li><a>Center 2</a></li> 
     </ul> 
     <ul class="nav pull-right"> 
      <li><a>Right</a></li> 
     </ul> 
    </div> 
</div> 

jsfiddle này http://jsfiddle.net/b7whs/ lãm này - I'd như Trung tâm 1 và Trung tâm 2 nav mục để ở bên nhau, làm trung tâm trong thanh điều hướng. Điều này có thể không?

Có rất nhiều đề xuất ở đây về SO về cách thực hiện việc này; không ai trong số họ đã làm việc cho tôi. Điều này thậm chí có thể?

Trong trường hợp của tôi, những gì ở bên trái và bên phải sẽ luôn luôn có cùng kích thước, vì vậy tôi nghĩ rằng nó sẽ khả thi.

Answer 1

Bạn chỉ cần một vài phong cách để có được những hành vi mà tôi nghĩ rằng bạn muốn. Có vẻ như bạn đang đi theo tuyến đường display:inline-block để căn giữa các yếu tố, vì vậy tôi sẽ tiếp tục theo cách tiếp cận đó. Để phong cách hiện tại của bạn, thêm/sửa đổi định nghĩa để các phong cách được bao gồm:

.nav.nav-center { 
    margin:0; 
    float:none; 
} 

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

Cùng với đó, hai tùy chọn nên di chuyển đến trung tâm chính xác của thanh điều hướng của bạn. Dưới đây là một số JSFiddle example để cho bạn thấy điều này trông như thế nào. Tôi hy vọng đó là điều mà bạn đang tìm kiếm! Nếu không, hãy cho tôi biết và tôi sẽ sẵn lòng trợ giúp thêm.

Answer 2

sử dụng css này thực sự trong bootstrap li và ul là float trái http://jsfiddle.net/b7whs/4/

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.nav.nav-center { 
    display: inline-block; 
    left: 0; 
    right: 0; 
    text-align:center;width:70%; 
} 
.nav.nav-center li,.nav.nav-center li a{display:inline;float:none;line-height:40px;} 

Answer 3

Chỉ cần tìm ra giải pháp cho bản thân hôm nay.

Just Thêm CSS như:

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

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

.center .dropdown-menu { 
    text-align: left; 
} 

và thêm lớp trung tâm để navbar như thế này

<div class="navbar navbar-inverse navbar-fixed-top center"> 
    <div class="navbar-inner"> 
    <div class="container center"> 
     ---- 
    </div> 
    </div> 
</div> 

Answer 4

thêm mã này

<div class="col-lg-4 col-lg-offset-5 col-xs-2 col-xs-offset-4"> <ul class=" nav navbar-nav "> <li><a href="#">products</a></li> </ul> </div>