Изменить twitter bootstrap navbar

Ответ 1

Вы можете центрировать свое навигационное меню, установив пункты меню display:inline-block вместо float:left следующим образом:

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

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

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

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

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

Изменить. Забыл переделать элементы подменю слева, это исправление:

CSS

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

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

Ответ 2

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

Существует лучший способ сделать это, а затем вручную изменить его. Это сократит код, используя то, что уже находится в 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-inner, который более или менее говорит, если это вообще возможно, установить минимальную высоту, и именно там берутся фактические цветовые стили, а не линия выше.

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

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

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

Ответ 3

Ah, а также, если вы хотите использовать пробелы с обеих сторон (перед именем "Project Name" и после "Dropdown" ), чтобы быть симметричными, добавьте следующее:

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

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

<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>

(Извлечен из образца, предоставленного Андресом Лиличем, только что он пропустил изменение)

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

Ответ 4

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

Это не идеально, когда navbar рушится. По умолчанию каждый свернутый элемент 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)