Alter Bootstrap nav tabs row wrapping

Question

With Bootstrap 3, the rows of navigation tabs are wrapped so that the widest rows appear at the top and the shorter ones at the bottom:

As a result, the tabs look awkward and unbalanced. Is there a way to change the navigation tabs so that the lines 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 that this is not the best solution in terms of performance, but, in any case ... I hope this will be useful. This solution is independent of the specific tab width and provides the desired result.

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 updated the answer with a new and improved solution. Here is a demo

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

Answer 3

Are you trying to make something like a fiddle

You can explicitly use the css trick to achieve what you want.

 .clear { clear: both; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-6"> <ul class="nav nav-tabs" id="sync-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 class="clear"><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 class="clear"><a href="#">FooBar 10</a></li> <li><a href="#">FooBar 11</a></li> <li><a href="#">FooBar 12</a></li> <li><a href="#">FooBar 13</a></li> <li><a href="#">FooBar 14</a></li> </ul> </div> </div> </div> 

Answer 4

Here is the fiddle I made according to your requirements

FIDDLE LINK

 .nav-tabs { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; } <div class="container"> <div class="row"> <div class="col-sm-6"> <ul class="nav nav-tabs" id="sync-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> 

UPDATED FIDLE LINK TO ANY IMAGE

Hope this helps ...

Answer 5

I did not understand what exactly you are looking for, and added that css looks good https://jsfiddle.net/2tu6a2yh/2/

 .nav-tabs { display: table; table-layout: fixed; width : 100%; } .nav-tabs li { display: table-cell; width:120px; // constant width } 

Answer 6

I think you need to set the column sizes for each list item for a more consistent view. Otherwise, the positions are determined according to the length of the text they contain. I think if you make a few samples, you will find the combination you want for each screen size. Try something like the following approach

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