ブートストラップの崩壊が急激に変化しています

Question

ブートストラップのナビゲーションバーに問題があります。

実際に

.menu-menu-container{ 
    padding: 100px 30px 60px 30px; 
    background-color: yellow; 
} 

私はメニューメニュー - からパディングを削除する場合：崩壊の要素は、私はこの問題をGoogleで検索して、問題がパディングであると思われるパディング

を持っている場合 崩壊はびくびく移行を持っていますコンテナ要素は、アニメーションがうまく機能し、それは非常に滑らかである

この私、私のcodepen>http://codepen.io/mp1985/pen/EyOJYE

どのように私はこの奇妙な問題なしで同じ結果を達成することができますか？

助け、助言、アドバイスはありますか？

Answer 1

影響を受けるアイテムにCSSトランジションを追加してみてください。これにより、ブラウザーがさまざまなパディング間でアニメートされるので、トランジションが少なくなります。独自のタイミングプロパティを使用して、各CSSのアニメーション化可能なプロパティをターゲットにすることができます。あなたはここにすべての様々なアニメーション可能なプロパティを表示することができますので、それを処理するコードの下340px使用であるナビゲーションバー-崩壊クラスの最大高さで起こってhttp://www.w3schools.com/cssref/css_animatable.asp

// will want to make this selector more targeted/meaningful 
 
* { 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -ms-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
}

Answer 2

そのを。 http://codepen.io/rahulchaturvedie/pen/VjVOLa

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { 
    max-height: none; 
} 

Answer 3

問題はあなたがを崩壊されているコンテナのパディングによって引き起こされます。それはcollapse.jsによって高さの計算を複雑

例：

HTML

<div class="collapsible-div padding-values"> 
     // YOUR CONTENT 
    </div> 

あなたが内部に詰め物を移動場合、これが修正されます

.padding-values{ 
    padding: 20px 40px 30px; 
} 

CSSコンテナ：

HTML

<div class="collapsible-div"> 
    <div class="new-container padding-values"> 
    // YOUR CONTENT 
    </div> 
</div>