Центр навигации в 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;
    }
}

navigation css responsive-design twitter-bootstrap centering
person opengrid    schedule 12.04.2012    source источник
comment
Выровнять как? Вы имеете в виду центр внутри блока span12?   -  person Andres Ilich    schedule 12.04.2012
comment
Используете ли вы адаптивную таблицу стилей начальной загрузки?   -  person Andres Ilich    schedule 12.04.2012
comment
Кстати, только что проверил ваш css, и он отлично работает.   -  person Andres Ilich    schedule 12.04.2012

Ответы (4)


arrow_upward
5
arrow_downward

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

.navbar-inner .container {width:960px;}
person James Lawruk    schedule 14.06.2012
comment
Привет, это помогло мне со стандартным окном просмотра, но что, если мне нужна адаптивная версия? - person Dominik; 25.08.2012
comment
Я думаю, вам нужна переменная $gridRowWidth. По крайней мере, это переменная sass. - person wuliwong; 16.11.2012

arrow_upward
4
arrow_downward

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

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

person Tim Baas    schedule 01.06.2013
comment
Кроме того, вы можете стилизовать .nav-collapse так же, как .nav выше, для адаптивной навигации. - person sebilasse; 23.07.2013
comment
Чтобы перезаписать .nav, иногда необходимо указать его как .navbar .nav, а не только .nav - person kachar; 04.09.2013

arrow_upward
1
arrow_downward

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

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

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

<div style="margin-left: 15%; margin-right: 15%;">
person s_t_e_v_e    schedule 27.07.2012

arrow_upward
0
arrow_downward

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

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

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

person Emiliano Poggi    schedule 07.02.2013
comment
последние версии браузеров действительно. в чем проблема с -1? - person Emiliano Poggi; 09.03.2013