Bootstrap 3 navbar-fixed-top остается фиксированным в мобильном режиме
Это может быть ошибка или просто мое плохое кодирование.
Я создал веб-сайт с использованием twitter bootstrap 2.3. * И не нашел проблем, особенно для чувствительной функции. Проблема возникла, когда я попытался переключиться на загрузку 3.RC-2, которая была последней стабильной версией (согласно Wikipedia). Я также попытался с примерами, содержащимися в загрузке, и имел тот же результат, когда я попытался изменить размер окна просмотра.
Пожалуйста, посмотрите пример http://bootply.com/69863 и попробуйте изменить размер окна браузера окна, затем выберите рендеринг и попробуйте развернуть меню и прокрутить страницу.
Мой реальный вопрос заключается в том, как сделать фиксированную навигационную статическую, когда на мобильном (сворачиваемом) представлении?
Ответы
Ответ 1
.navbar-fixed-top
теперь сохраняет фиксированный верхний экран навигационной панели для всех размеров экрана. Это будет значение по умолчанию. Когда вы посмотрите на navbar.less, вы увидите, что медиа-запросы не применяются и к этому классу.
Чтобы сделать статическую навигацию после развала, добавьте css, показанный ниже, после Boostrap CSS:
@media (max-width: 767px) /* @grid-float-breakpoint -1 */
{
.navbar-fixed-top
{
position: relative;
top: auto;
}
}
Ответ 2
В дополнение к тому, что упомянул Басс Джобсен, для лучшего удобства использования на мобильных устройствах, следующий фрагмент кода CSS удаляет "прокрутку" на панели навигации и удаляет верхнее поле, которое существует из-за большого фиксированного навигационного экрана:
@media (max-width: 767px) {
.navbar-fixed-top {
position: relative;
top: auto;
}
.navbar-collapse {
max-height: none;
}
body {
margin: 0;
}
}
Ответ 3
@media (max-width: 767px){
.navbar-fixed-top {
position: relative;
top: auto;/* Auto position navbar top */
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height:inherit;/* Clear max-height */
}
body{
padding:0px;/* No padding */
}
}