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 */
   }
}