Question

我正在使用相当普遍的twitter Bootstrap 3 navbar-header。

设置：

navbar-header有2个navbars
一个navbar左侧浮动，有很多按钮（navbar-header的高度延伸）
第二个navbar向右浮动

需要量：

我希望有一个固定的navbar-header高度，因为我在浮动左侧菜单上使用了很多按钮，导航栏标题的高度扩展
我想在左侧浮动navbar上隐藏会导致navbar-header高度扩展的额外按钮
这应该适用于$(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。）

我使用.outerWidth()和.width()方法代替.offsetTop。
我想您可以从导航栏中删除<div class="container-fluid"></div>，因为导航栏已包含在<div class="container"></div>中。
当屏幕宽度为767px或更低时，我们需要显示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>

根据屏幕宽度

1 个答案: