Как я могу сосредоточиться на Twitter-Bootstrap 3 навигационных ссылках?

Как я могу центрировать кнопки в настройке jsFiddle, чтобы кнопки были одинаково разнесены и центрированы внутри и снаружи навигационной панели?

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

Я пробовал разные методы, такие как

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

Но я не могу заставить его работать.

Если бы вы могли дать небольшое объяснение вместо того, чтобы просто фиксировать CSS, как я хочу узнать, поэтому мне не нужно возвращаться сюда.

EDIT:

http://img1.123freevectors.com/wp-content/uploads/icon_big/038_icon_beautiful-navigation-bar-free-vector.jpg Точно так же, как они сосредоточены здесь.

Ответы

Ответ 1

Для этой цели у Bootstrap 3 есть новый класс nav-justified. Не требуется дополнительный 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>

Демо: http://bootply.com/72519

Также смотрите: Bootstrap NavBar с выровненными по левому, центральному и правому элементам

Ответ 2

Добавьте стиль

.nav{
    text-align: center;
}

Это центрирует текст в li.

Check Fiddle

Эти стили должны быть достаточными. Вы пытались применить стили к неправильному элементу.

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