Показать и скрыть кнопки Bootstrap Navbar на основе ширины экрана

Question

Я использую довольно общую настройку twitter Bootstrap 3 navbar-header.

SETUP:

1. navbar-header имеет 2 navbars
2. один navbar плавает влево с большим количеством кнопок (проходящая высоту navbar-header)
3. второго navbar плавает правый

ТРЕБОВАНИЯ:

1. Я хочу иметь фиксированную высоту NavBar-заголовок и так я использую много кнопок на плавающем меню слева Navbar-заголовок расширяется в высоте
2. Я хочу, чтобы скрыть дополнительные кнопки на плавающем влево navbar что заставит navbar-header расширяться в высоту
3. это должно работать на $(window).resize(function() {});

простыми словами, когда окно изменяет размер, дополнительные кнопки должны скрыть и показанный на основе доступного размера, так что navbar-header не расширяется по высоте.

В настоящее время у меня возникают проблемы с плавающим правом меню.

JSFIDDLE:https://jsfiddle.net/bababalcksheep/wsxa0zae/4/ Попробуйте изменить размер окно

var adjustable = function() { 
var collection = []; 
    $('.adjustable-drop').find('> li').removeClass('hide').each(function() { 
    if (this.offsetTop > 51) { 
     collection.push(this); 
    } 
    }); 
    $(collection).addClass('hide'); 
}; 


$(window).resize(function() { 
    adjustable(); 
}); 
$(window).trigger('resize'); 

Answer 1

UPD. Я улучшил свое решение. (Первая версия here.)

1. Я использовал .outerWidth() и .width() методы вместо этого .offsetTop.

2. Я думаю, вы можете удалить <div class="container-fluid"></div> с Navbar, потому что Navbar завернут в <div class="container"></div>.

3. Нам нужно показать все элементы Navbar, когда ширина экрана составляет 767 пикселей или меньше.

Пожалуйста, проверьте результат: https://jsfiddle.net/glebkema/yt985oxf/

var selectNavbar = $('#navbar'); 
 
var selectNavbarHeader = $('.navbar-header'); 
 

 
var adjustable = function() { 
 
    if (document.documentElement.clientWidth <= 767) { 
 
    $('.adjustable-drop .hide').removeClass('hide'); 
 
    } else { 
 
    var collection = []; 
 
    var widthFree = selectNavbar.width() - selectNavbarHeader.outerWidth(true) - selectNavbar.find('.navbar-right').outerWidth(true); 
 
    $('.adjustable-drop').find('> li').removeClass('hide').each(function() { 
 
     if (widthFree >= $(this).outerWidth(true)) { 
 
     widthFree -= $(this).outerWidth(true); 
 
     } else { 
 
     collection.push(this); 
 
     } 
 
    }); 
 
    $(collection).addClass('hide'); 
 
    } 
 
}; 
 

 
$(window).resize(function() { 
 
    adjustable(); 
 
}); 
 

 
$(window).trigger('resize');

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 

 
    <!-- Static navbar --> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Project name</a> 
 
    </div> 
 
    
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav adjustable-drop"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Additional-1</a></li> 
 
     <li><a href="#">Additional-2</a></li> 
 
     <li><a href="#">Additional-3</a></li> 
 
     <li><a href="#">Additional-4</a></li> 
 
     <li><a href="#">Additional-5</a></li> 
 
     <li><a href="#">Additional-6</a></li> 
 
     <li><a href="#">Additional-7</a></li> 
 
     <li><a href="#">Additional-8</a></li> 
 
     <li><a href="#">Additional-9</a></li> 
 
     <li><a href="#">Additional-10</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="../navbar-static-top/">Static top</a></li> 
 
     <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
 
     </ul> 
 
    </div><!--/.nav-collapse --> 
 
    </nav> 
 

 
    <!-- Main component for a primary marketing message or call to action --> 
 
    
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>