bootstrap "mega-dropdown" centering main menu nav items

Question

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

Вот что у меня есть, см. Пример здесь: http://codepen.io/ajmajma/pen/ALJbdk.

Это прекрасно работает, однако мне нужно, чтобы эти пункты главного меню (дома, о и т. Д.) Были центрированы.

Моя первая мысль была inline-block их, однако это вызывает некоторые шуточные поведения с подменю.

Если добавить

.desktop-nav { 
    text-align: center 
} 

.menu { 
    display: inline-block 
} 

я получить желаемый эффект центрированного, однако вложенное меню ограничивается в небольшом размере центральной ul, и мне нужно, чтобы он оставался в полной ширине страницы. См. Поведение здесь - http://codepen.io/ajmajma/pen/wzYPQm.

Любая идея, как исправить это, чтобы получить желаемый эффект? Благодаря!

Answer 1

Вы можете добавить text-align:center в ul и добавить display:inline-block в ли. Просто удалите float:left из ли, и вы хороши.

.menu > ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none; 
    padding: 0; 
    position: relative; 
    box-sizing: border-box; 
    text-align:center; 
} 

.menu > ul > li { 
    display: inline-block; 
    padding: 5px; 
    margin: 0; 
} 

http://codepen.io/Founded1898/pen/amREJm

Answer 2

я нашел решение этой:

.desktop-nav { margin-left: 50%; }

и .menu > ul > li > ul { margin-left: -50%; }

, если вы не хотите, чтобы установить поле на рабочем столе, вы должны создать что-то вроде .iWantThisMenuToCenter{margin-left: 50%} и назначить его значку nav