Bootstrap 3 navbar-fixed-top остается фиксированным в мобильном режиме

Question

Это может быть ошибка или просто мое плохое кодирование. Я создал веб-сайт с использованием twitter bootstrap 2.3. * И не нашел проблем, особенно для чувствительной функции. Проблема возникла, когда я попытался переключиться на загрузку 3.RC-2, которая была последней стабильной версией (согласно Wikipedia). Я также попытался с примерами, содержащимися в загрузке, и имел тот же результат, когда я попытался изменить размер окна просмотра.

Пожалуйста, посмотрите на пример http://bootply.com/69863 и попробуйте изменить размер окна браузера окна, затем выберите рендеринг и попробуйте развернуть меню и прокрутить страницу.

Мой настоящий вопрос: как сделать фиксированную навигационную статическую, когда в мобильном (разборном) виде?

Answer 1

.navbar-fixed-top сохраняет фиксированный верхний экран навигационной панели для всех размеров экрана. Это будет значение по умолчанию. Когда вы посмотрите на navbar.less, вы увидите, что медиа-запросы не применяются к этому классу тоже.

Чтобы сделать Navbar статический после распада добавить CSS показанный ниже после Boostrap CSS:

@media (max-width: 767px) /* @grid-float-breakpoint -1 */ 
{ 
    .navbar-fixed-top 
    { 
    position: relative; 
    top: auto; 
    } 
} 

Answer 2

Кроме того, что затронуло Bass Jobsen, для более удобного использования на мобильных, следующий CSS сниппет удаляет «суб-прокрутка» на панели навигации и удаляет верхний край, который существует из-за большой экран фиксированной навигационной панели:

@media (max-width: 767px) { 
    .navbar-fixed-top { 
     position: relative; 
     top: auto; 
    } 
    .navbar-collapse { 
     max-height: none; 
    } 
    body { 
     margin: 0; 
    } 
} 

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