javascript - 更改 Bootstrap 导航选项卡行换行

Question

在 Bootstrap 3 中，导航选项卡行的环绕方式是最宽的行往往位于顶部，而较短的行位于底部:

这使得选项卡看起来笨拙且不平衡。有没有一种方法可以修改导航选项卡，使底部的行更宽？更像这样:

这是 JSFiddle产生了第一张图片。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Foo Bar 1</a></li>
        <li><a href="#">FooBar 2</a></li>
        <li><a href="#">FooBar 3</a></li>
        <li><a href="#">FooBar 4</a></li>
        <li><a href="#">FooBar 5</a></li>
        <li><a href="#">FooBar 6</a></li>
        <li><a href="#">FooBar 7</a></li>
        <li><a href="#">FooBar 8</a></li>
        <li><a href="#">FooBar 9</a></li>
        <li><a href="#">FooBar 10</a></li>
        <li><a href="#">FooBar 11</a></li>
        <li><a href="#">FooBar 12</a></li>
        <li><a href="#">FooBarBaz 13</a></li>
        <li><a href="#">FooBarBaz 14</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

我知道从性能的 Angular 来看这不是最好的解决方案，但无论如何......希望这会有所帮助。此解决方案不依赖于特定的制表符宽度并提供您想要的结果。

JSFiddle:https://jsfiddle.net/cpxd8eh0/6/

$(function(){
  var $container = $('#sync-tabs');

  updateTabs($container);
  $(window).resize(function(){
     updateTabs($container);
  });

  function updateTabs($tabsContainer){
    var $containerWidth = $tabsContainer.width();
    var tabWidths = [];
    var $tabs = $tabsContainer.find('li');
    $tabs.each(function(index, tab){
        tabWidths.push($(tab).width());
    });

    var formattedTabs = [];
    var maxWidth = $containerWidth;
    var maxWidthSet = false;
    var rowWidth = 0;
    for(var i = tabWidths.length - 1; i >= 0; i--){
        var tabWidth = tabWidths[i];
        if(rowWidth + tabWidth > maxWidth){
            if(!maxWidthSet){
              maxWidth = rowWidth;
              maxWidthSet = true;
            }
            rowWidth = tabWidth;
            formattedTabs.unshift($('<div class="spacer"></div>'));
        }else{
           rowWidth += tabWidth;
        }
        formattedTabs.unshift($tabs.get(i));
      }

      var $tempContainer = $('<div></div>');
      formattedTabs.forEach(function(tab, index){
        $tempContainer.append(tab);
      });
      $tabsContainer.html($tempContainer.html());
  }
});