サイズ変更後にドロップダウンメニューが機能しません

Question

ブートストラップで始めて、メニューヘッダーだけで小さなHTMLテンプレートを作成しました（ドロップダウン項目付き）。

問題は、応答メニューを強制するのに十分な小さい小さくなるようにウィンドウのサイズを変更した後、折りたたまれた状態でドロップダウン（ナビゲート）を使用し、その後、ドロップダウンメニュー項目は機能を停止します（スクロールを表示するドロップダウンの代わりにコンテンツを表示するには）

サンプルコード？bootstrapから「Navbarテンプレート」を試してみてください： http://getbootstrap.com/examples/navbar/

この問題に対する既知の修正はありますか？

FirefoxとChromeで試験した。

Answer 1

更新

ブートストラップのCSSの後にこれを追加します。

@media (min-width: 768px) 
{   
    .navbar-collapse.in{ overflow-y:visible;}
}

.

- 最終更新

はい、これは「奇妙な」と見えます。 "IN"クラスは静止している後に効果を持っています。

jQueryでクラスを削除することができます：

$(document).ready(function() 
{
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {

        if ($window.width() >= 768) {
            $('.navbar-collapse').removeClass('in').addClass('collapse');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});   

.

コードのサイズ変更：ウィンドウサイズに基づいてクラス名を動的に変更する< / a>、これを行うより良い解決策： JavaScriptを使用してTwitter Bootstrap 3の応答的なブレークポイントを検出する方法は？

メディアクエリでブレークポイントの上のスクリーン幅の上に.inクラスをリセットすることも可能です。

バグのようです、参照： https://github.com/twbs/ブートストラップ/問題/ 11243

Answer 2

折りたたみクラスがディスプレイを追加したので、他の答えは私のためにうまくいきませんでした：なし。（おそらく異なるバージョンのブートストラップ）。私のために働いている解決策はあなたの応答性の高いCSSに追加されています：

@media screen and (min-width: 768px){
    .collapse{ display:block;}
}

.

私が開いたときに問題が発生してから、折りたたまれたメニューを閉じ、続いてサイズ変更が行われた。これが役立つことを願っています。

Answer 3

折りたたみ要素（破断点の上）の自動高さを強制した。

トグルボタンにIDまたはクラスを見つけます。data-target=".navbar-ex1-collapse"とmin width（あなたの破断点）：

@media screen and (min-width: 768px){
    .navbar-ex1-collapse { height:auto !important;}
}

.