15

Bootstrap 2.0.3 を使用しており、折りたたみ可能/展開可能な div 内にドロップダウン メニューがあります。ドロップダウン メニューが div をオーバーフローすると、それらは切り取られます (ただし、そうすべきではありません)。説明する Jsfiddle: http://jsfiddle.net/t3wFK/1/

Bootstrap 2.0.2 では、メニューが途切れることはありません: http://jsfiddle.net/u3wkK/

次のようにcssルールを使用して、半分の回避策を見つけました。

#stuff.in {
  overflow: visible;
}

「折りたたみ」でマークされた div が展開されるたびに、「in」CSS クラスがブートストラップによって追加されます。

残念ながら、この回避策は Firefox では完全に機能しません。

何か案は？Bootstrap 2.0.2 にダウングレードすることを検討していますが、それは苦痛です。

4

4 に答える 4

18

ここでの問題は、2.0.3では、Bootstrapが.collapseクラスを#stuff要素に適用することであるように見えます。ブートストラップcssには、次のスタイルがあります。

.collapse {
    overflow: hidden;
}

ただし、.collapseターゲットを展開すると、overflowプロパティは残りhiddenます。

それがバグであるかどうかはわかりませんが（これを行うことの欠点があるかどうかを確認するために、より深く調査する必要があります）、のルールを変更する.collapse.inことは機能します。

.collapse.in {
    height: auto;  /* this style already exists in bootstrap.css */
    overflow: visible;  /* this one doesn't. Add it! */
}

BootstrapのCSSを変更したくない場合（コメントに記載されているように意図しない副作用が発生する可能性があります）、要素にイベントハンドラーを追加shownして、プロパティを変更できます。hide#stuffoverflow

$('#stuff').on({
    shown: function(){
        $(this).css('overflow','visible');
    },
    hide: function(){
        $(this).css('overflow','hidden');
    }
});
于 2012-08-15T01:38:18.903 に答える
4

Bootstrap 2.1.1 で回避策を試してみましたが、Firefox 16 で壊れてしまい、初めて機能しただけでまったく開かなくなりました。

私の場合、問題は訪問者が折りたたみ可能な要素を初めて開き、インラインの固定高さが適用されたときだけでした。2 回目の高さは自動に設定されました。

したがって、問題は、最初に状態が宣言されていない nav-collapse 要素の html コードに依存していることがわかりました。

最初のコードは次のとおりです。

<div class="nav-collapse">

次に、初めてブートストラップを展開した後、固定の高さを割り当てます。

<div class="nav-collapse in collapse" style="height: 286px;">

そして、最初の高さを 0 に戻した後:

<div class="nav-collapse collapse" style="height: 0px;">

2回目に開くと、自動高さで正常に動作します:

<div class="nav-collapse collapse" style="height: auto;">

したがって、javascript が自動高さを設定するには、クラス .collapse が必要です。

<div class="nav-collapse collapse">

理解するのに時間がかかりました！

于 2012-10-22T14:58:06.280 に答える
1

Firefoxのように、フラグを使用してみてください!important。何らかの理由で、プロパティは異なる優先度で読み取られます。

http://jsfiddle.net/t3wFK/2/

.in {
    overflow: visible !important;
}
于 2012-08-12T21:49:07.563 に答える
1

私はこれについて多くの調査を行っていましたが、このコード行をcssに追加することで問題の解決策を見つけました.https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202でこれを見つけました

.collapse.in[style="height: auto;"] {overflow: visible;}

これは私にとってはうまくいきました

于 2013-06-11T05:27:22.923 に答える