При использовании twitter bootstrap 3 в меню мобильных устройств nabber есть горизонтальные и верительные скроллеры.
Это не было с 2.3, и я не мог понять, как отключить его, и позволить пунктам меню полностью заполняться без каких-либо полос прокрутки.
Это новое для Bootstrap 3.
Лучший способ сделать это - удалить или прокомментировать строки 52 и 53 в /less/navbar.less: https://github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53 (вы можете дополнительно удалить строка 59) и перекомпилируйте bootstrap.less.
Если вы не можете перекомпилировать Bootstrap с помощью такого инструмента, как CodeKit или Grunt, вы захотите написать медиа-запрос в своем документе css, который выделяет и перезаписывает класс .navbar-collapse, возможно, так:
@media (max-width: 767px) {
.navbar-collapse {
max-height: auto;
overflow-x: auto;
}
}
Я не тестировал этот код выше - так как мне удалось перекомпилировать. Возможно, вам придется включить! Важно или что-то в этом роде.
Это должно быть сделано (если вы соблюдаете правила CSS 3.0)
max-height: none;
Чтобы удалить вертикальную полосу прокрутки, этот бит CSS работал. У меня не было горизонтальных полос прокрутки.
@media (max-width: 767px) {
.navbar-collapse {
max-height: none;
}
}
Я просто наткнулся на это сам...
Просто абсолютно позиция .navbar-default.
Разделитель .navbar-collapse абсолютно позиционируется, и вам нужно "прикрепить" его к элементу parent/ancestor, который не статически расположен. Итак, я просто добавил:
.navbar-default {
position: absolute;
}
Не знаю о Bootstrap 4 (который только что выпустил альфа), но это похоже на трюк с Bootstrap 3 nav. У меня очень длинный навигатор, и теперь я могу правильно прокрутить вниз и увидеть все навигационные элементы.
Другое решение в Boostrap 3.3.4 добавляет следующее к вашему CSS:
/* No scrolling for collapsed menu */
.navbar-collapse.in {
overflow: hidden;
max-height: none !important;
height: auto !important;
}