Alter Bootstrap nav tabs row wrapping

Question

With Bootstrap 3, rows of nav-tabs wrap in a way where the widest rows tend to be at the top while the shorter rows are at the bottom:

This leaves the tabs looking awkward and unbalanced. Is there a way that nav-tabs can be modified so that the rows are wider at the bottom? More like this:

Here's the JSFiddle that produced the first image.

<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

I know it's not the best solution from the performance point of view but, anyway...Hope, this will be helpful. This solution doesn't depends on specific tab width and provides the result you want.

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());
  }
});

Answer 2

I have updated the answer with a new and improved solution. Here is a demo. _.debounce is a function from Lodash which is being used to improve performance of the resize watcher.

function setTabs() {
  let availableWidth = $('#nav-bar').outerWidth();
  let liNodes = $('#nav-bar li');
  liNodes.removeClass('clear');
  let filledWidth = 0;
  for (var i=liNodes.length-1; i>=0; i--) {
    let currentWidth = $(liNodes[i]).outerWidth();

    if (filledWidth + currentWidth <= availableWidth)
      filledWidth += currentWidth;

    else {
      $(liNodes[i+1]).addClass('clear');
      availableWidth = filledWidth;
      filledWidth = currentWidth;
    }
  }
}

setTabs();
$(window).resize(_.debounce(setTabs, 200));