7

この問題は、(私が知っている) Twitter Bootstrap のすべてのバージョンで発生する可能性があります。だから、私はナビゲーションバーを持っていて、画面が小さいときは折りたたみ式のトレイになります。この動作は、ブートストラップ デモ サイトで確認できます。サブメニューもあり、最初のナビゲーション バーの展開では折りたたまれて表示されます。問題は、最初の折りたたみ時に、折りたたみ可能オブジェクトが明示的な高さセットを取得することです。閉じて再度展開すると、折りたたみ可能height:auto;

そのため、サブメニュー項目をクリックすると、ドロップダウンが展開されますが、高さが明示的に設定されているためにオーバーフローします。

私の試みた解決策は追加されました：

$(function() {
  $('.nav-collapse').on({
    shown: function() {
      $(this).css('height', 'auto');
    },

    hidden: function() {
      $(this).css('height', '0px');
    }
  });
});

これはまったく影響していないようです。そのコードを削除しましたが、それでも同じ効果があります。JS Fiddle が役立つ場合は、喜んで提供しますが、Bootstrap デモ サイトでこれらすべてを確認できます。

前もって感謝します、チャールズ。

4

2 に答える 2

21

少し気になり、検索したところ、要素に.collapseクラスを追加することで問題を解決できることがわかりました。.nav-collapse

動作デモ (jsfiddle)

私たちがただMeh.. と言うときの 1 つで、ドキュメントを文字どおりに読むべきでした(「参考文献」を参照Responsive navbar)。

<div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
</div>

後世のために：

この問題のおかげで見つかりました: https://github.com/twitter/bootstrap/issues/3788

本当に関連しているかどうかはわかりませんが、私のデバッグでは、最初のトランジションの高さのリセットで問題が発生しました（source）：

$.support.transition && this.$element[dimension](this.$element[0][scroll])
于 2013-02-06T22:45:44.517 に答える
0

Bootstrap は、折りたたみ要素の初期化時に要素スタイルの高さを 280px に設定しています。

.collapse() への呼び出しの直後に、ready() 関数にこの JQuery 行を追加しました。

$("#avail_detail").collapse();
$("#avail_detail").css("height","auto");

そして、今では期待どおりに動作します。

于 2013-02-06T19:09:32.823 に答える