Bootstrap3:选项卡或链接行-当屏幕变窄时，多余的选项卡应该流入最右边的下拉选项卡。

Question

设想情况：

在大屏幕上，水平行包含6-7选项卡，没有问题。但是，随着屏幕开始缩小，最右边的选项卡应该变成(或者添加这样的选项卡)一个带有“更多”标签的下拉标签，并在其他选项卡开始缺乏显示空间时接收它们。

切换到移动视图的过程应该像往常一样只显示第一个和第二个选项卡(一个示例)，加上上面的“更多”下拉选项卡托管其他选项卡。

这有道理吗？在Bootstrap 3中有什么东西能够支持这样的东西吗？

Answer 1

在Bootply上的演示可以帮助您：

http://bootply.com/105764

它计算制表符行的高度。当高度超过50像素时，它会将额外的选项卡移动到下拉列表中。当窗口调整大小时，它将相应地折叠/展开选项卡。

var autocollapse = function() {

  var tabs = $('#tabs');
  var tabsHeight = tabs.innerHeight();

  if (tabsHeight >= 50) {
    while(tabsHeight > 50) {

      var children = tabs.children('li:not(:last-child)');
      var count = children.size();
      $(children[count-1]).prependTo('#collapsed');

      tabsHeight = tabs.innerHeight();
    }
  }
  else {
    while(tabsHeight < 50 && (tabs.children('li').size()>0)) {

      var collapsed = $('#collapsed').children('li');
      var count = collapsed.size();
      $(collapsed[0]).insertBefore(tabs.children('li:last-child'));
      tabsHeight = tabs.innerHeight();
    }
    if (tabsHeight>50) { // double chk height again
        autocollapse();
    }
  }

};

$(document).ready(function() {

    autocollapse(); // when document first loads

    $(window).on('resize', autocollapse); // when window is resized

});