Full width tabs using Bootstrap (Support IE)

Question

I\'m trying to adjust Bootstrap tabs to make them span the full width of their container. Here\'s my code (a minimal working example):

<         


        

Answer 1

Simple:

.nav-tabs > li {
    /* width = (100 / number of tabs). This example assumes 3 tabs. */
    width:33.33333%;
}

Hope that helps!

Answer 2

Try this, for all '.nav-pills' and each 'li' element inside with double loop.

function(){
$('.nav.nav-tabs').each(function(){
    var liGroup = $(this).children('li');
    var liLength= liGroup.length;
    liGroup.each(function(){
        var liWidth = 100/liLength-1;
        $(this).css({'min-width': liWidth+'%','margin-left':'0px','margin-right':'0px'});
    });
});}

DEMO http://jsfiddle.net/