Изменение навигационной панели Twitter Bootstrap на центрирование ссылок

При работе с навигационной панелью Twitter Bootstrap пользователи могут столкнуться с необходимостью выравнивать навигационные ссылки по центру, а не по левому краю по умолчанию . Для этого выполните следующие настройки с помощью таблицы стилей CSS.

Решение

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

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

Альтернативный подход

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

    

        ....
    

Затем выберите класс .center в таблице стилей CSS:

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

Дополнительные рекомендации

Чтобы выровнять элементы подменю по левому краю, добавьте следующее правило CSS:

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