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

});