當窗口太小時Bootstrap選項卡顯示不正確

所以我有一個使用bootstrap選項卡的導航菜單。這很好，但是當窗口的寬度足以使製表符（對齊）尚未堆疊時，它會顯示很奇怪（因爲一些製表符現在取兩行而不是一行），如您所見：當窗口太小時Bootstrap選項卡顯示不正確

好：

screencap good

壞：

screencap bad

而這裏的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-合理的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處損壞）。它有效，但如果有人有更好的解決方案，我是開放的！

來源

2014-09-28 jonathanGB

這是自舉V3.2.0？這是否發生在所有瀏覽器？ – cvrebert 2014-09-28 08:39:53

至少3，我不記得究竟是哪一個。是的，鉻和火狐 – jonathanGB 2014-09-28 08:42:11

請你也可以發佈CSS。 – 2014-09-28 08:55:39

使用white-space:nowrap;可以使標籤總是以單行顯示，這可能是你的解決方案：

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

Demo fiddle

來源

2014-09-28 19:27:29

完美，這正是我一直在尋找的！非常感謝！ – jonathanGB 2014-09-28 20:02:11

當窗口太小時Bootstrap選項卡顯示不正確

回答

相關問題