Bootstrap導航欄（粘貼導航欄）在滾動過程中調整大小

我在早期開發中有一個以引導爲主題的網站，並且遇到粘滯導航欄中的奇怪行爲。在Chrome中途向下滾動（以及最初在Firefox中滾動時）後，導航欄縮小至其寬度的一半。任何人都可以想到這個原因嗎？Bootstrap導航欄（粘貼導航欄）在滾動過程中調整大小

由於看到此行爲的演示！

更新：這肯定是由Scollspy功能引起的，因爲禁用它會阻止此行爲。然而，仍然沒有解決。 – givemesnacks 2013-04-24 19:09:33

它看起來像你使用詞綴和滾動。我不認爲你們需要一起使用，這可能是導致問題的原因。使用scrollspy你會更好。

爲了做到這一點，你的身體標記改成這樣：

<body data-spy="scroll" data-target=".navbar" data-offset-top="50">

然後導覽列格改成這樣：

<div class="navbar navbar-inverse navbar-fixed-top">

這將停止調整的問題，同時讓scrollspy工作。但是，如果你希望你的導航欄要小於全寬，你關不使用navbar-fixed-top，而是固定的導航欄頂端自己更好，做這樣的事情：

@media (min-width: 481px) { 
    .navbar { 
    position: fixed; 
    z-index: 1030; 
    width: 80%; 
    margin: 20px auto; 
    } 

}

2013-04-24 21:05:53 frostyterrier

在你的CSS試試這個基部的NAV-包裝ID

HTML

<nav id="nav-wrapper" class="navbar-default" role="navigation" data-spy="affix" data-offset-top="60">

CSS

#nav-wrapper.affix { 
top: 0 !important; 
width: 100% !important; 
}

它應該修復您的調整大小問題，問候！

2014-02-09 10:03:13 Alexis

回答