当窗口太小时，引导选项卡无法正确显示

Question

所以我有一个使用bootstrap标签的导航菜单。这一切都很好，但是当窗口宽度足以使标签（对齐）尚未堆叠时，它显示奇怪（因为某些标签现在占用两行而不是一行），如您所见：

好：

为：

这是HTML：

<ul id="onglets" class="nav nav-tabs nav-justified" role="tablist">
    <li class="active"><a href="#mod" data-toggle="tab"> addition (polaire) </a></li>
    <li><a href="#com" data-toggle="tab"> addition (composantes) </a></li>
    <li><a href="#con" data-toggle="tab"> conversion d'angles </a></li>
    <li><a href="#mul" data-toggle="tab"> produit </a></li>
    <li><a href="#uni" data-toggle="tab">vecteur unitaire </a></li>
</ul>

我想我在bootstrap.min.css中找到了与nav-justified相关的CSS：

.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border-bottom-color:#fff}}

我该如何解决这个问题？谢谢！

编辑：所以，通过使用bootstrap.min.css文件，我能够更改@media查询以将标签更改为992px而不是768px（因为它将在991px处开始损坏） 。它有效，但如果有人有更好的解决方案，我就是开放的！

Answer 1

使用white-space:nowrap;可以使标签始终显示在一行中，这可能是您的解决方案：

@media (min-width: 768px){
    #onglets>li>a {
        white-space: nowrap;
    }
}

Demo fiddle