Zeigen und verbergen Bootstrap Navbar die Tasten basierend auf der Bildschirmbreite

Question

Ich benutze ziemlich Gemeinsame Einrichtung von Twitter Bootstrap 3 Navbar-Header.

SETUP:

1. navbar-header hat 2 navbars
2. einem navbar ist mit vielen Knöpfen schwebend gelassen (erstreckende Höhe navbar-header)
3. 2. navbar floatet rechts

ANFORDERUNG:

1. mag ich feste Höhe von navbar-Header haben, und da ich viele Tasten auf schwimmende linke Navigation verwenden, navbar-Header erweitern in Höhe
2. er auf zusätzliche Tasten ausblenden möge navbar floating linken wird navbar-header verursachen in Höhe
3. erweitern diese $(window).resize(function() {});

in einfachen Worten auf funktionieren sollte, wenn das Fenster der Größe verändert wird, sollten zusätzliche Tasten und gezeigt basierend auf den verfügbaren Größe verstecken, so dass navbar-header wird nicht in der Höhe erweitert.

Momentan habe ich Probleme mit dem richtigen Menü.

JSFIDDLE:https://jsfiddle.net/bababalcksheep/wsxa0zae/4/ Versuchen Fenster

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 Ändern der Größe. Ich habe meine Lösung verbessert. (Die erste Version ist here.)

1. ich verwendet habe, .outerWidth() und .width() Methoden anstelle des .offsetTop.

2. Ich denke, man <div class="container-fluid"></div> aus dem Navbar entfernen kann, weil die Navbar in <div class="container"></div> gewickelt ist.

3. Wir müssen alle Elemente der Navbar zeigen, wenn die Breite des Bildschirms 767px oder weniger beträgt.

Bitte überprüfen Sie das Ergebnis: 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>