修复Bootstrap Tabs在缩小时对齐

Question

我正在使用Bootstrap制作标签部分。它看起来不错，我已经使用了＆＃34; nav-justified＆＃34;类。然而，当收缩标签时，我注意到比其他标签略大的全局指数标签正在进入第二行。有什么方法可以解决这个问题吗？

收缩前：

收缩后： -

Answer 1

我使用媒体查询来控制选项卡的宽度而不是字体并修复它。谢谢大家:)

@media (max-width: 1100px) 
{ 
.stock-tabs{ min-width: 170px; } 
}


<ul class="nav nav-tabs nav-justified" role="tablist">
         <li class="active"><a href="#tabs-first" role="tab" data-toggle="tab">FX</a></li>
         <li><a class="stock-tabs" href="#tabs-second" role="tab" data-toggle="tab">US Rate Futures</a></li>
         <li><a class="stock-tabs" href="#tabs-fourth" role="tab" data-toggle="tab">Global Equity Indices</a></li>
         <li><a href="#tabs-fifth" role="tab" data-toggle="tab">Commodities</a></li>
         <li><a  href="#tabs-sixth" role="tab" data-toggle="tab">Volatility</a></li>
      </ul>