Bootstrap nav對齊奇怪的響應問題

一旦您降低導航欄的寬度，nav就會變得很棒，這非常棒。一旦你打開窗口備份導航項目在兩行。這是一張照片。Bootstrap nav對齊奇怪的響應問題

enter image description here

這是怎麼開始的：

enter image description here

http://reggi.myshopify.com/pages/about#

來源

2013-10-16 ThomasReggi

在github上https://github.com/twbs/bootstrap/issues/11132提交問題 – ThomasReggi

This is a known bug with Bootstrap.

這已被固定在Chrome自2013年起取代@屏幕-SM，但仍然是一個open bug in WebKit和發生在Safari中。

Safari會出現一個錯誤，其中水平調整瀏覽器的大小會導致在刷新時清除的對齊導航中出現渲染錯誤。該錯誤也顯示在對齊的導航示例中。 — cvrebert

我建議不使用.nav-justified或者是確定它不會在Safari中正常工作。

來源

2015-09-16 07:57:46 ThomasReggi

的問題是在.nav-justified類display: table-cell;指令。

讓我們來看看bootstrap.css文件，我相信，你正在使用Bootstrap version 3.0，在線4109.

@media (min-width: 768px) { 
    .nav-tabs.nav-justified > li { 
    display: table-cell; 
    width: 1%; 
    }

您必須將其更改爲：

@media (min-width: 768px) { 
     .nav-tabs.nav-justified > li { 
     display: inline-block; 
     float: left; 
     margin-left: 100px; 
     } 

}

這將解決你的問題。

來源

2013-10-16 21:32:05 lvarayut

我寧願不修改引導源。有沒有辦法覆蓋引導媒體查詢？ – ThomasReggi

當然是的，你只需要在你的CSS文件中創建一個類並添加上面的代碼。之後，您可以在li標籤中指定您的新課程。 – lvarayut

請注意，如果您不想將其添加到每個li標籤中，則可以將其添加到ul標籤並使用.newClass> li，如Bootstrap所做的那樣，或者通過其他方式。 – lvarayut

FWIW，我發現，迫使有關.nav-justified元素的重繪有助於WebKit的理解。很明顯，你會選擇如何做，這是給你，我選擇了fadeIn()，因爲當生活給你檸檬...

$(window).bind('resize', function(){ 
    var w = $(this).width(), 
     threshold = 768; 

     if(w < threshold){ 
      $('.nav-justified').hide().fadeIn(); 
     } 
});

來源

2013-10-21 18:29:38 couzzi

非常感謝！從* .width（）<= 768px回到> 768px調整大小時會出現問題。像我一樣，可以選擇僅在發生這種情況時才應用此樂隊援助。 –

另外，您可以使用* .fadeIn（speed，easing，callback）參數來進一步改進解決方案。例如，使用* .fadeIn（0）可以將淡入淡出時間縮短到0毫秒，因此重繪效果是即時的。默認值是400ms。 –

兩個答案似乎有所欠缺。 JS解決方案導致大量閃爍，而CSS解決方案似乎並未保持設計選項卡的完整性。這是我想出來的。

如果你不使用更少的與引導的風格只是768px

@media (min-width: @screen-sm) { 
    .nav-tabs.nav-justified > li { 
     display: block; 
     float: left; 
     width: 32.9999% 
    } 
}

來源

2013-10-29 21:08:30 velomash

Bootstrap nav對齊奇怪的響應問題

回答

相關問題