Изменить twitter bootstrap navbar

Question

Ive пытался изменить twitter bootstrap navbar, на данный момент все ссылки выровнены влево, когда мне действительно понравится, чтобы они были центральными.

В другом посте я прочитал, что вы используете этот

.tabs, .pills { 
    margin: 0 auto; 
    padding: 0; 
    width: 100px; 
} 

Но это не сработало для меня

Что мне нужно сделать, чтобы изменить в CSS, чтобы это произошло, я понимаю, я поставил измененный css в bootstrap и переопределяет.

Любой помощь оценила

это мои разметки

макетов/приложение

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

    <a class="brand">Newbridges</a> 

    <% if user_signed_in? %> 
    <div class="nav-collapse"> 
     <ul class="nav "> 
     <%= render "shared/navbarlogin" %> 
    </div> 

    <% else%> 
    <div class="nav-collapse"> 
     <ul class="nav"> 

     <%= render "shared/navbar" %> 
    </div> 
    <% end %> 

Я также попытался это

.nav > li { 
    float: none; 
    display: inline-block; 
    *display: inline; 
    /* ie7 fix */ 
    zoom: 1; 
    /* hasLayout ie7 trigger */ 
} 
.nav { 
    text-align: center; 
} 

Answer 1

Вы можете центрирование меню навигационной установки ваши пункты меню до display:inline-block вместо float:left li ка так:

.navbar .nav, 
.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    *zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
} 

.navbar-inner { 
    text-align:center; 
} 

Хотя я предлагаю вам создать свой собственный класс, чтобы ориентировать меню NavBar, что вы хотите к центру, таким образом, вы не будете заморачиваться значением начальной загрузки по умолчанию и беспорядок с другими разделами навигационных вы можете иметь в твоя страница. Вы можете сделать это так:

^{Обратите внимание на .center класс в NavBar контейнере}

<div class="navbar navbar-fixed-top center"> 
    <div class="navbar-inner"> 
     .... 
    </div> 
</div> 

И тогда вы можете настроить таргетинг на .center класс следующим образом:

.center.navbar .nav, 
.center.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    *zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
} 

.center .navbar-inner { 
    text-align:center; 
} 

Demo: http://jsfiddle.net/C7LWm/show/

Редактировать: Забыл перестроить пункты подменю слева, это исправление:

CSS

.center .dropdown-menu { 
    text-align: left; 
} 

Демо: http://jsfiddle.net/C7LWm/1/show/

Answer 2

Ах, а также, если вы хотите для пространств с обеих сторон (до «Название проекта» и после того, как «Выпадающий») должно быть симметричным, добавьте следующее:

.navbar .nav, .navbar .nav > ul 
{ 
    float: right 
} 

Кроме того, кажется, что с помощью следующих (по состоянию на Bootstra p v2.0.4) не центрировать Navbar еще:

<div class="navbar navbar-fixed-top center"> 
     <div class="navbar-inner"> 
     <div class="container-fluid"> 
     . 
     . 
     . 
     </div> 
     </div> 
</div> 

Вам нужно изменить, чтобы

<div class="navbar navbar-fixed-top center"> 
     <div class="navbar-inner"> 
     <div class="container"> 
     . 
     . 
     . 
     </div> 
     </div> 
</div> 

(извлеченного из выборки, представленной Андрес llich, только что он пропустил изменения)

Теперь это работает для меня ...

Answer 3

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

На самом деле существует лучший способ сделать это, а затем вручную изменить его. Это сократит код, используя то, что уже находится в twitter bootstrap.

<div class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="brand" href="#">RIZEN</a> 
      <ul class="nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li><a href="#">Events</a></li> 
       <li><a href="#">Links</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Forums</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Разбивка
Первая линия довольно проста, как мы создаем Navbar, установив его в фиксированном положении на видовом экране в верхней части, а затем обменивать белого до черного, переворачивая тему цвета.

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

Вот линия ВАЖНО, поскольку мы отбрасываем жидкую компоновку для навигационной панели и идем только с контейнером. Это устанавливает фиксированное значение с полями, которые центрируют внутреннее содержимое на экране. Это делается с помощью автоматического поля и установки ширины.

Этот метод будет делать то, что вам нужно, поскольку вы действительно сохраняете kb в запросах заголовков, не добавляя дополнительный код и правильно используя строительные леса с помощью twitter bootstrap и не имея лишнего раздувания кода. Я использовал этот метод в своих проектах и ​​продолжаю использовать его в своем текущем проекте. Опасность с изменением TBS (twitter bootstrap) заключается в том, что вы теряете целостность кода, и если в будущем вы захотите изменить ситуацию, вы должны задуматься о том, что вы изменили, иначе ситуация может не работать должным образом.

Надеюсь, это поможет. Кроме того, если вы хотите, чтобы рабочий пример просто посмотрел на домашнюю страницу twitter bootstrap, так как это было именно так.

Answer 4

Центрирующий css сверху работает хорошо на нераскрытых navbars.

Это не идеальный момент, когда навигационная панель рухнула. По умолчанию каждый свернутый элемент navbar находится в своей строке, например, в раскрывающемся меню. Но css выше пытается засунуть все свернутые предметы в ту же строку, которая меньше идеальной.

Я использовал эту небольшую починку оберточного центрирующую CSS в запросе медиа, поэтому он сработал на только не разрушились NavBars:

@media (min-width: 768px) { 
    .center.navbar .nav, 
    .center.navbar .nav > li { 
     float:none; 
     display:inline-block; 
     *display:inline; /* ie7 fix */ 
     *zoom:1; /* hasLayout ie7 trigger */ 
     vertical-align: top; 
    } 
    .center .navbar-inner { 
     text-align:center; 
    } 
} 

(протестировано с бутстрапом 3.1.1)