Скрыть элементы на навигационной панели при изменении ширины экрана

Question

В настоящее время я использую Bootstrap v3.3.0, и мне бы хотелось, чтобы пользователь менял ширину экрана, последние элементы навигационной панели (LINK перед раскрывающимся списком) исчезают и добавляются на выпадающий список. Могу ли я сделать это с помощью Bootstrap или любой библиотеки JS?

Пример навигационной панели: http://getbootstrap.com/examples/navbar/

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

Answer 1

Возможно, вы должны использовать следующий подход: Добавьте их дважды, поэтому в обычном меню и в выпадающем меню. Затем в CSS отобразить или скрыть их при необходимости.

@media (min-width: 768px) { 
    #item_link1 
    { 
     display:none; 
    } 
} 

@media (max-width: 768px) { 
    #item_link2 
    { 
     display:none; 
    } 
} 

Answer 2

функции Использование Jquery

$(window).on("orientationchange load resize", function() { 
    var width = $(document).width(); 
    if(width<765){ 
      // $("#elementID").hide(); 
      // code for other elements hide stuff 
    } 
    else if(width>765){ 
      // for show iamges 
    } 
});