0

Я настраиваю меню в Bootstrap 3, и я не уверен, как центрировать выпадающее поле относительно родителя.Bootstrap 3 nav drop-down center

Вот изображение, чтобы объяснить, что я хочу сделать - http://i.picpar.com/MBw.png

Вот jsbin - http://jsbin.com/oCorUjA/1/

Спасибо!

Редактировать: Может кто-нибудь мне помочь? Я много пробовал и ничего не добился.

ответ

0

Я была такая же проблема, что я сделал, дать каждому ниспадающее меню, это собственный идентификатор, то я бы определить элемент в CSS, ... то, что вы пытаетесь сделать, в основном это:

Дон» t сначала перезапишите основной загрузочный CSS-код ... но в Google Chrome проверьте элемент, когда вы найдете раскрывающееся меню, добавьте margin-left: -35px; и вы увидите, что ваш первый выпадающий список выстроится в центре, так? ... Это должно дать вам представление о том, что вам нужно сделать для каждого выпадающего меню с его собственным ID :-) Вы, вероятно, не хотите используйте отрицательные поля, я просто даю вам представление о том, что делать:

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

0

Проблема заключается в том, что вы устанавливаете минимальную ширину 160 пикселей для выпадающих меню (тех, которые переключаются, когда вы наводите на нее курсор). Они настроены на float: left и всегда будут шириной 160px, но ширина навигационной панели выше основана на длине введенных вами слов (серверы, управляемые службы и т. Д.). Вы можете исправить это, изменив (.dropdown-menu) позицию css на относительную, а не на абсолютную. Это заставит навигационную панель отскакивать, когда вы наводите курсор на элементы, если вы не установите также (.navbar-nav li a) на min-width 160px. Я рекомендую использовать Firefox в качестве браузера, чтобы вы могли проверять элементы, делать временные изменения css, чтобы видеть различия, и проверять мобильность. Удачи