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

【问题标题】：Bootstrap tabs not displaying correctly when window too small当窗口太小时，引导选项卡无法正确显示
【发布时间】：2014-09-29 03:27:29
【问题描述】：

所以我有一个使用引导程序选项卡的导航菜单。一切都很好，但是当窗口的宽度使得选项卡（对齐）尚未堆叠时，它会显示奇怪（因为一些选项卡现在占用两行而不是一行），如您所见：

好：

不好：

这是 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 查询以将要堆叠的选项卡更改为 992 像素而不是 768 像素（因为它会在 991 像素处开始损坏） .它有效，但如果有人有更好的解决方案，我很开放！

【问题讨论】：

这是 Bootstrap v3.2.0 的版本吗？所有浏览器都会出现这种情况吗？
至少 3 个，不过我不记得具体是哪一个了。是的，chrome 和 firefox
请您也发布 CSS。
没有css，这就是bootstrap显示HTML的方式（如果忽略nav下的按钮，则与它无关）
我认为因为 .nav-justified 类尝试删除它

标签： jquery html css twitter-bootstrap

【解决方案1】：

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

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

Demo fiddle

【讨论】：

完美，这正是我想要的！非常感谢！