jquery - 当窗口太小时，Bootstrap 选项卡无法正确显示

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