Jak mogę wyśrodkować linki na pasku nawigacyjnym Twitter-Bootstrap 3?

Question

Jak mogę wyśrodkować przyciski w jsFiddle I tak, aby przyciski były równomiernie rozmieszczone i wyśrodkowane wewnątrz i na zewnątrz paska nawigacyjnego?

http://jsfiddle.net/3GQyq/3/

próbowałem różnych metod, takich jak

display:inline-block;margin:0 auto; text-align:center; 

Ale nie mogę zmusić go do pracy.

Jeśli mógłbyś podać trochę wyjaśnienia, zamiast tylko poprawiać CSS, ponieważ chcę się uczyć, więc nie muszę tu wracać.

EDIT:

Podobnie jak w jaki sposób są one tutaj skupione ^.

Answer 1

Bootstrap 3 ma nową klasę nav-justified do tego celu. Nie wymaga dodatkowych CSS:

<div class="container"> 
    <h3 class="text-muted">Project name</h3> 
    <ul class="nav nav-justified"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Projects</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Downloads</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

Demo: http://bootply.com/72519

zobacz także: Bootstrap NavBar with left, center and right aligned items

Answer 2

Dodaj styl

.nav{ 
    text-align: center; 
} 

To będzie wyśrodkować tekst Li.

Check Fiddle

Te style powinny być wystarczające. Próbowałeś zastosować style do niewłaściwego elementu.

// This is being applied by the bootstrap 
// Set it to 25px instead of the default 15px 
.navbar{ 
    padding : 0 25px; 
} 

// Gave a width of 110px for each li 
// as the container is following a fixed width format 
li{ 
    width:110px; 
}