Центрирование фиксированной верхней панели навигации для больших экранов в Twitter Bootstrap 3

Question

У меня есть фиксированный верхний navbar в Twitter Bootstrap 3.
Все работает хорошо до 1350 пикселей. После 1350px становится пробел между содержимым navbar. Итак, я хочу центрировать мой navbar.

Я проверил ответы на это, это и это. Никто из них не работал для меня.

Это моя скрипка: http://jsfiddle.net/mcqHE/56/
В настоящее время я использую Navbar 1,
Чтобы попробовать центрирование навигационной панели, я добавил Navbar 2 на скрипку.

Проверьте скрипку шириной 1500 пикселей.
* Navbar 1 - одна линия, не центрирована и имеет пробел.
* Навбар 2 по центру, без зазора, но это две линии.
Кажется, причина в этом правиле: @media (min-width: 1200px) .container { max-width: 1170px; }

Итак, как я могу сделать навигацию по центру и одну линию, если ширина больше 1350 пикселей?

Answer 1

Это ответ для вашей проблемы:-)

Вам необходимо добавить следующие строки в css:

@media screen and (min-width:  1350px) {
   .navbar { text-align: center; }
   .navbar-header { display: inline-block; float: none !important; }
   .navbar-collapse.collapse { display: inline-block !important; }
}

Вот решение на: http://jsfiddle.net/myN2s/.

Дайте мне знать, если вы решите это.

Каждый раз, когда вы хотите центрировать элементы, вы должны добавить text-align:center к родительскому элементу, и display: inline-block к элементам, которые вы хотите центрировать по горизонтали. Ничто из этого не может быть спущено на воду (это очень важно).

Answer 2

Для navbar 1 добавьте следующий CSS к этому div div class = "navbar-collapse navbar-part2 collapse

max-width: 1350px;
margin-left: auto;
margin-right: auto;

max width гарантирует, что часть навигации не будет шире, чем 1350px margin-left:auto и margin-right:auto будет центрировать навигацию.

Я думаю, это то, что вы после? если не извините!

Answer 3

Это исправление затронет все стили на вашей странице. Но я думаю, это то, что вы просите, не было достаточно места, чтобы вставить в одну строку. http://jsfiddle.net/mcqHE/58/

* {
    font-size:10px;
}

Answer 4

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

1) Да, именно ширина создает два зазора, но главный виновник .container, Так что удалите <div> с классом .container

2) Добавьте этот CSS, чтобы держать ваши пункты меню в центре:

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

3) Наконец это:

.collapse.navbar-collapse.in{ display: inline-block !important; }

Связывает два <ul> элементы вместе.

Дополнительно:

Если вы хотите, чтобы заголовок "Навбар" был также центрирован, вы можете сделать:

.navbar-header { float: none; }

Вот JSFiddle.

И это влияет на разрешение> 1350 пикселей.