Исправлен Navbar на разных размерах экрана

Question

Есть ли способ использовать Bootstrap 3 Исправлен Navbar, чтобы зафиксировать его сверху на md +, но фиксированный снизу на более мелких устройствах?

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

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

Заранее спасибо.

Answer 1

Довольно простой с немного jQuery.

Просто проверьте ширину браузера при загрузке, и если он равен или меньше 768 пикселей в ширину, добавьте navbar-fixed-bottom на ваш навигатор.

JQuery:

var width = $(window).width(), 
    height = $(window).height(); 
if ((width <= 768)) { 
    $('.navbar').addClass('navbar-fixed-bottom'); 
} 

переменная ширина получает ширину окна на нагрузке, а затем, если заявление проверяет, если он равен или меньше, чем 768 пикселей. Если это так, то он добавляет соответствующий класс, иначе он оставит его в покое. Вы должны стрелять это на странице загрузки, так что в конечном итоге выглядит примерно так:

$(function() { 
var width = $(window).width(), 
     height = $(window).height(); 
    if ((width <= 768)) { 
     $('.navbar').addClass('navbar-fixed-bottom'); 
    } 
}); 

FIDDLE

Просто сделайте области результатов в скрипкой более узкой, чтобы имитировать samller устройства/экран size/window, затем нажмите run, чтобы увидеть, как он переворачивается сверху вниз.

Возможно, вы можете переключать его сверху вниз, даже если пользователь изменяет размер окна. Может оказаться полезным, когда пользователь поворачивает мобильное устройство.

$(window).on('load resize', function() { 
    if($(window).width() <= 768) { 
     $('.navbar').addClass('navbar-fixed-bottom'); 
    } else { 
     $('.navbar').removeClass('navbar-fixed-bottom'); 
    } 
}); 

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

Answer 2

Если вы не хотите использовать javascript для этого случая, вот мое решение.

Поскольку вы должны использовать:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 

сделать СЧ прикрепленным к началу или:

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 

сделать СЧ фиксированного вниз, вы можете просто сделать это InstEd из этих двух:

<nav class="navbar navbar-default navbar-position" role="navigation"> 

И после этого:

/* LESS */ 

@media (max-width: 767px) { 
    navbar-position { 
     .navbar-fixed-bottom; 
    } 
} 

@media (min-width: 768px) and (max-width: 991px) { 
    navbar-position { 
     .navbar-fixed-bottom; 
    } 
} 

@media (min-width: 992px) and (max-width: 1199px) { 
    navbar-position { 
     .navbar-fixed-top; 
    } 
} 

@media (min-width: 1200px) { 
    navbar-position { 
     .navbar-fixed-top; 
    } 
} 

Итак, как вы видите, InstEd из navbar-fixed-top или navbar-fixed-bottom вы можете использовать navbar-position ведьмой наследуют navbar-fixed-top или navbar-fixed-bottom классы в зависимости от типа устройства (хз, см, мкр, Л.Г.)