3

私は、 Select2コンポーネントを含む Twitter Bootstrap をよく持っています。

デモはhttp://jsfiddle.net/U4KTM/1/で見ることができます

Chrome には 2 つの問題があります (FF や IE では明らかではありません)。

  • クロムにはオーバーフローの問題があり、ウェルに垂直スクロールバーが表示されます。これは、次の css によって解決されるようです。

    .tab-content { オーバーフロー: 非表示; }

  • Chrome の 2 つ目の問題は、下部のドロップダウンでアイテムを選択すると、ウェル内で奇妙なジャンプの問題が発生し、ウェルのコンテンツの一部が上部から消えてしまうことです。

問題のコードは次のとおりです。

<div class="well">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#panel1" data-toggle="tab">First tab</a></li>
        <li class=""><a href="#panel2" data-toggle="tab">Second tab</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="panel1">
            <div class="control-group">
                <label for="bar" class="control-label"></label>
                <div class="controls">
                    <select name="bar" class="selector">
                        <option value="0">First Option</option>
                        <option value="1" selected="selected">Second Option</option>
                        <option value="2">Third Option</option>
                    </select>
                </div>
            </div>                      
            <div class="control-group">
                <label for="bar" class="control-label"></label>
                <div class="controls">
                    <select name="bar" class="selector">
                        <option value="0">First Option</option>
                        <option value="1" selected="selected">Second Option</option>
                        <option value="2">Third Option</option>
                    </select>
                </div>
            </div>              
        </div>
    </div>
</div>
4

2 に答える 2

4

この CSS クラスを上書きしてみてください.tab-content:

と：

.tab-content {
      overflow:visible;
 }

スタイルは次の場所にあります。

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css

ライン: 608

于 2013-05-02T20:54:45.643 に答える
0

私もこの問題に遭遇しました。select2.js を少し変更して、_makeMaskCss の高さをコメントアウトする必要があるようです。これは、Bootstrap Responsive で発生するようです。デモは問題なく動作しているようです。

function _makeMaskCss() {
            return {
                width  : Math.max(document.documentElement.scrollWidth,  $(window).width())//,
                //height : Math.max(document.documentElement.scrollHeight, $(window).height())
            }
        }
于 2013-08-30T04:26:47.150 に答える