Центр Navbar в Twitter Bootstrap 2.0

Предположим, у нас есть следующая разметка для панели навигации, использующая 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;
    }
}

Ответы

Ответ 1

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

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

Ответ 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

Ответ 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>

Ответ 4

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

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

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

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

Ответ 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 на основе ширины вашего текущего навигатора.

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