显示并隐藏基于屏幕宽度的Bootstrap Navbar按钮

Question

我正在使用相当通用的设置推特启动3导航栏标题。

设置：

1. navbar-header有2 navbars
2. 一个navbar向左浮动，有许多按钮(扩展navbar-header的高度)
3. 第二navbar是浮动的权利

REQUIREMENT:

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.我改进了我的解决方案。(第一个版本是这里。)

1. 我使用了.outerWidth()和.width()方法，而不是.offsetTop。
2. 我想您可以将<div class="container-fluid"></div>从Navbar中删除，因为Navbar是包装在<div class="container"></div>中的。
3. 当屏幕宽度为767 or或更小时，我们需要显示Navbar的所有元素。

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

​