Selectセレクトは、私は、ブートストラップのタブを使用していますが、私は任意のタブで<code>select2</code>を使用していたときに私は、複数のタブを持っていますが、何らかの理由で<code>select2</code>プラグイン（検索可能なドロップダウンリスト）</p> <p>を利用していますブートストラップのタブで

Question

をドロップダウンリストをつぶし負荷のアクティブなタブ以外のドロップダウンリストは、私がそれらを与えているcol-md-3クラスに従わずにちょうど束ねています。代わりに、彼らは踏みつぶす。ページロード時に表示される1番目のアクティブクラスのドロップダウンリストは、クラスに正しく従います。

私は、アクセスできるテストデータでjsfiddleでサンプルを再作成しました。HEREです。 セクションBのドロップダウンリストは、クラスAは行いますが、col-md-3クラスに従いません。

助けが必要ですか？正直なところ私はstyle="width:100%"を使用したり、モバイルレスポンスのためにどんなスタイルでも使用したりしたくありません。 もう一度ありがとうございます。

EDIT：Operaブラウザ、Mozilla Firefox、Google Chromeでこれをテストしました。最悪の打撃はOperaです。 Google Chromeは最高のこの問題は常に

Answer 1

$(document).ready(function() { 
    $.fn.select2.defaults.set("theme", "classic"); 
    $("#carsA").select2(); 
    $('#second').on('click',function(){ 
    setTimeout(function(){$("#carsB").select2();},200); 
    }) 
}) 

Fiddleを再現していなかったところ答えました。

タブでトリガするときにSelect2を初期化する必要があります。したがって、割り当てられたクラスcol-md-3の幅に収まるようになります。時間間隔の使用は、HTMLレスポンス構造の前に初期化されないようにすることです。必要に応じて時間間隔を増やしてください。私はこれがCSSスタイルなしで解決する方法だと思います。