html - 缩小时修复 Bootstrap Tabs 对齐

Question

我正在使用 Bootstrap 制作标签部分。它看起来不错，我使用了“nav-justified”类。然而，在缩小选项卡时，我注意到比其他选项卡稍大的 Global Indices 选项卡正在移到第二行。有什么办法可以解决这个问题吗？

收缩前:

收缩后:-

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>