2015-07-08 2 views
2

Когда ширина моего экрана достигает 767px, навигация сворачивается как исключенная. Когда я перехожу на 768px, navbar-nav идет ниже бренда navbar. Пока я не достиг 795px, снова появятся навигационные бренды и navbar-nav. Эти значения изменяются в зависимости от того, насколько велика ваша навигация. Вот jsbinnavbar-nav попадает под навигационную марку?

ответ

3

Ваш навигатор слишком широкий, поэтому места для него не хватает, чтобы он оставался на той же линии. Вы можете уменьшить отступы «.nav> li> а» для

padding: 10px 13px; 

, чтобы избежать проблемы

+0

Как вы придумали 10px 13px? Будет ли это изменяться, если я добавлю или удалю пункты меню? Можно ли также использовать медиа-запрос? – xaisoft

+1

Я только что протестировал консоль Chrome. Но он будет работать только с этим набором элементов, если вы добавите некоторую проблему, она вернется, так как меню будет шире. – symdev

2

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

1

Общая ширина .navbar-заголовка и .navbar-nav - 794px, и для них нет места в той же строке. Вы можете изменить дополнение для .nav> .li> a to 10px 13px

+0

Как вы определяете 10px и 13px? Можно ли также использовать медиа-запрос? – xaisoft

+0

Заполнение по умолчанию для этого элемента - 10px 15px. Я открыл вашу ссылку, установил ширину 768 пикселей для окна «Выход» и использовал инструменты разработчика Chrome для замены изменений. С моими значениями весь элемент встал в одну строку. Вы можете установить его как значение по умолчанию или задать в запросе медиа для ширины окна задачи. Однако обратите внимание, что ширина .navbar-nav зависит от текстов ссылок. Если он будет длиннее, необходимо будет уменьшить значение больше. И если это будет короче, вы можете забыть об этой проблеме. – Kasumi

Смежные вопросы