根据屏幕宽度显示和隐藏Bootstrap导航栏的按钮

Question

我使用twitter Bootstrap 3导航栏标题的相当常见的设置。

SETUP：

1. navbar-header具有2 navbars
2. 一个navbar留下有很多按钮（延伸的navbar-header高度）
3. 第二navbar是浮动的右侧

浮要求：

1. 我想有导航栏头的固定高度，因为我使用的很多按钮的浮动左边的菜单，导航栏头高度扩展
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被包裹到<div class="container"></div>。

3. 当屏幕宽度为767px或更小时，我们需要显示导航栏的所有元素。

请检查结果：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>