JSFiddle - React, Tailwind, and code Playground

by Rene Rubio

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="tabbable full-width-tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
                <li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-one">
                    I'm in Tab 1.
                </div>
                <div class="tab-pane" id="tab-two">
                    Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. 
                </div>  
            </div> 
        </div> <!-- /tabbable -->

JavaScript

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