Центр Навбар в Твиттере Bootstrap 2.0

Question

Предположим, у нас есть следующая разметка для панели навигации с использованием Twitter Bootstrap 2.0.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner pull-center">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

Каков наилучший способ сосредоточиться .nav внутри navbar-inner?

Я только добавил свои собственные стили CSS:

@media (min-width: 980px) {
    .pull-center {
        text-align: center;
    }
    .pull-center > .nav {
        float:none;
        display:inline-block;
        *display: inline; *zoom: 1;
        height: 32px;
    }
}

Answer 1

Переопределить ширину контейнера в панели навигации из auto в 960px,

.navbar-inner .container {width:960px;}

Answer 2

Чтобы выровнять его по центру с динамической шириной, я использовал следующее:

HTML:

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      ....
    </ul>
  </div>
</div>

CSS:

.navbar .navbar-inner {
    text-align: center;
}
.navbar .navbar-inner .nav {
    float: none;
    display:inline-block;
}

Не проверял, но, думаю, только display:inline-block; может быть проблемой, которая поддерживается во всех браузерах, кроме IE7 и ниже.

http://caniuse.com/inline-block

Answer 3

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 4

Просто использование класса контейнера согласно http://twitter.github.com/bootstrap/components.html центрирует мою навигацию; однако, это фиксированная ширина и форматирование выключено (высота навигационной панели увеличена, и вполне возможно, что я делаю что-то не так).

Было бы неплохо, чтобы навигация была центрирована в плавной, основанной на процентах ширине, с минимальной шириной, основанной на некотором минимальном поддерживаемом размере экрана устройства, и в настоящее время. (Я новичок в ответах на медийные запросы, и, возможно, это лучшая альтернатива процентным ставкам.)

Все еще исследуются минимальная ширина и nowrap, но другой альтернативой фиксированной ширине класса контейнера начальной загрузки является добавление дочернего элемента navbar-inner. Я хотел бы знать, есть ли встроенное решение начальной загрузки, такое как классы row-Fluid и SpanN, но я также не смог правильно отформатировать его в nav.

<div style="margin-left: 15%; margin-right: 15%;">

Answer 5

Я нашел это полезным и чистым:

<div class="navbar navbar-fixed-top">
  <div class="container">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

где, css это:

.container {left:auto;right:auto}

Это будет центрировать div на основе ширины вашей текущей панели навигации.

Отзывчивость управляется отдельно.