19

ブートストラップ 3 ナビゲーションバー内に select2 検索ボックスを配置しました。問題は、ブラウザのサイズを変更すると、検索ボックスのサイズが自動的に変更されず、ナビゲーション バーがオーバーフローしてしまうことです。select2 ボックスをレスポンシブにする方法は明確ではありません。

こちらをご覧ください: https://jsfiddle.net/vgoklani/3vtrgkc7/13/

jsfiddle で結果ウィンドウのサイズを変更する必要があります。幅が十分に長くない場合、検索ボックスは非表示になり、表示されません。私が望むのは、ウィンドウの幅に基づいて幅のサイズが変更されるように、検索ボックスが応答することです。

    <nav class="navbar navbar-dark navbar-fixed-top">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                    <i class="fa fa-chevron-down fa-2x" style="font-size: 16px;color:#fff"></i>
                </button>
                <a class="navbar-brand">NAME</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search1" multiple="multiple" id="Search1" style="width:400px;height:34px"></select>
                    </div>
                </form>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search2" multiple="multiple" id="Search2" style="width:400px;height:34px"></select>
                    </div>
                </form>

            </div>
        </div>
    </nav>

ありがとう

4

11 に答える 11

33

あなたが何をしたいのかよくわかりません。

これを試すことができますか：

@media screen and (max-width: 767px) {
    .select2 {
        width: 100% !important;
    }
}
于 2015-06-03T12:34:05.250 に答える
11

これは私のために働く：

$(window).resize(function() {
    $('.select2').css('width', "100%");
});

于 2016-11-14T18:05:36.867 に答える
6

ブートストラップ 3 で select 2 バージョン 4 を使用しています。select 2 はコードなしで応答します。

select2でページを開いてリサイズするとselect2のサイズが変わらず、反応が悪いと思うかもしれませんのでご注意ください。ただし、ページを新しいサイズで更新すると、select 2 がページに正しく収まることがわかります。

これは、select 2 がそのコンポーネントをレンダリングし、ドキュメントの終了時にサイズを計算し、ページのサイズを変更するときにそれらを更新しないためです。これは、エンド ユーザーがブラウザのサイズを変更することを想定していないため、まったく問題ありません (これは、テスト用の開発中に通常行っていることです!)

私の経験では、select 2 の幅を手動で変更すると、select2 ドロップダウンが select コンテナーの上部またはボタンに正確に収まらない場合があります。

CSS が必要になる唯一のケースは、サイトがモバイルで閲覧され、ユーザーがモバイルを回転させることで画面を回転できる場合です。

以下の css は、ブートストラップ列を考慮して select 2 のサイズを変更するため、役立つ場合があります。

/*Make select2 responsive*/
[class*="col-"] .select2-container {
    width:100%!important;
}
[class*="col-"] .select2-container .select2-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .select2-container .select2-drop {
    width: 100%!important;
}
于 2015-12-23T06:41:51.027 に答える
2

select2が行うことの 1 つは、生成する要素に固定幅を設定することです。そのため、デフォルトでは応答しません。

JavaScript を少し使用して、イベントの各<select>要素の幅を設定し、 select2プラグインを再初期化できます。$(window).resize()

注: 要素をレスポンシブにするために、固定幅 (400px など) を設定することはできませんが、流動的な幅を設定してください。私の例では、各選択の幅が本体の幅の 3 分の 1 に等しいと仮定しています。

// Assume that each select will have as width the 1/3 of the body width
// Get body width and divide it with 3 and apply it to each select
var width = $('body').width() / 3;
$('#Search1, #Search2').width(width);

$("#Search1, #Search2").select2({
    data: data
});

// Put same code to the window.resize handler to run again when the window is resized
$(window).resize(function() {
    var width = $('body').width() / 3;
    $('#Search1, #Search2').width(width);

    $("#Search1, #Search2").select2({
        data: data
    });
});

これが動作するデモです。

于 2015-06-04T10:25:34.253 に答える
1

col-入力フィールドに適用しようとしたことがありますか? このような"multiple" id="Search1" style="height:34px"></select>

于 2015-06-01T07:53:16.937 に答える
1

Alireza Fattahi がすでに述べたように、bootstrap テーマを使用した select2 v4 はすでに応答性が高いようです。ブラウザーのサイズ変更の問題を処理するには、サイズ変更イベントで select2 を再初期化します。

    $(window).resize(function () {
        $("select").select2();
    });

これをさらに確認した後、select2 コントロールを再初期化したくないという結論に達しました。これはやり過ぎであり、作成されたときとまったく同じ方法で再初期化することに注意しないと、期待どおりに機能しません。

私が見つけたのは、コントロールをレスポンシブ コンテナーに配置しているため、コントロールが初期化された後に select2 コンテナーのインライン幅を取り除くことだけでした。私がテストした限り、ウィンドウのサイズ変更イベントを処理する必要もありません。

    //Initialize select2
    $("select").select2({
       //your options
    });

    //Remove inline width after initialization
    $(".select2.select2-container").css("width", "");
于 2017-01-02T15:09:29.197 に答える
1

css の下に追加し、それを html の最後に参照します

 @media screen {
    .select2 {
        width: 100% !important;
    }
}
于 2016-05-04T14:49:48.253 に答える
0

Javascript :

$("#myid").select2({
   width:'100%'
});
于 2016-07-01T08:09:10.377 に答える
0

これは単なるサンプルであり、必要に応じてよりクリーンにすることができます。number は、select2 に指定したクラスの名前です。

$screenWidth=$(this).width();

function checkWindowWidth() {
 if($screenWidth<767){
 }

 if(991>$screenWidth && $screenWidth>768){
    $('.number',.number+span).css('width','100%');
 }

 if($screenWidth<1199 && $screenWidth>992){
    $('.number,.number+span').css('width','45%');
 }

 if($screenWidth>1199){
    $('.number,.number+span').css('width','33%');   
 }
}
于 2016-03-27T13:07:47.813 に答える
0

クラスのmin-widthはデフォルトで、オーバーフローしないように減らすことによってです。.select2-container20em

必要に応じて調整します。

.select2-container {
  min-width: 17em;
}
于 2020-01-11T15:34:18.517 に答える