title: bootstrap tabs justify with badge on small screen jump to second row
body: <p>i have sample code</p>
  
  <pre><code>&lt;ul class="nav nav-tabs nav-justified"&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home &lt;span class="badge"&gt;15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>i have problem with badge is screen is smaller badge jump to second row, and this is what i don't want</p>
  
  <p>working demo on <a href="http://jsfiddle.net/twvqxtgw/" rel="nofollow">http://jsfiddle.net/twvqxtgw/</a> 
  i tried with float and etc but nothing working :/ still jump to second row
  also on big screen title with badge in center of tab</p>
  
  <p>Thanks!</p>