8

select2ドロップダウンにinput-lgクラスを実装するにはどうすればよいですか? ドロップダウンをinput-lgのクラスを持つ入力要素と同じサイズにしたくない

<div class="col-sm-4">
     <label for="mobile" class="control-label"><span class="text-danger">*</span> Nationality</label>
     <input type="text" id="nationality" name="nationality" class="form-control input-lg" />
</div>

<div class="col-sm-4 padding-minimum">
     <label for="mobile" class="control-label"><span class="text-danger">*</span> Gender</label>
     <select name="gender" id="gender" class="form-control select2-container input-lg step2-select" data-placeholder="Select Gender">
         <option></option>
         <option value="1">Male</option>
         <option value="0">Female</option>
     </select>
</div>

そして、ここに私のスクリプトがあります

<script>
  $(document).ready(function(){
    $('select').select2();
  });
</script>

しかし、選択要素にinput-lgのクラスを配置したにもかかわらず、ドロップダウンが初期化されると、input-lgのクラスを持つ入力フィールドと同じサイズではないようです。これを実装する方法について何か考えはありますか? select2 の高さを入力フィールドと同じにしたいだけです

私はselect2バージョン4.0.0を使用しており、cssはバージョン3.5.2だと思います

4

5 に答える 5

7

この専用 CSS (select2-bootstrap-theme) が非常にうまく機能することがわかりました。

bower install select2-bootstrap-theme

<link rel="stylesheet" href="select2.css">
<link rel="stylesheet" href="select2-bootstrap.css">

$( "#dropdown" ).select2({
    theme: "bootstrap"
});

select2.full.jsサイズを管理できるようにする必要があると言われていますが、「フル」バージョンがなくても機能するようでした

于 2016-08-24T12:52:18.410 に答える
6

入力の高さをselect同じにするには、CSS で次の変更を行い、input-lgセレクターを削除します。<select>不要であり、使用しません。

$(document).ready(function () {
	$('select').select2();
});
.select2-container--default .select2-selection--single {
    height: 46px !important;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 85% !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #CCC !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" />
<div class="col-sm-4">
    <label for="mobile" class="control-label"><span class="text-danger">*</span> Nationality</label>
    <input type="text" id="nationality" name="nationality" class="form-control input-lg" />
</div>
<div class="col-sm-4 padding-minimum">
    <label for="mobile" class="control-label"><span class="text-danger">*</span> Gender</label>
    <select name="gender" id="gender" class="form-control select2-container step2-select" data-placeholder="Select Gender">
        <option></option>
        <option value="1">Male</option>
        <option value="0">Female</option>
    </select>
</div>

フィドル

于 2015-10-28T07:32:02.693 に答える
0

必要なのは、select2 アドオン CSS をダウンロードしてブートストラップ テーマを使用するように select2 を設定するだけです。

https://github.com/select2/select2-bootstrap-theme

<link href="js/select2-bootstrap-theme/dist/select2-bootstrap.min.css" rel="stylesheet">

次にJS部分で

$('.select2').select2({
    theme: "bootstrap"
});

(ブートストラップテーマなし)

ここに画像の説明を入力

(ブートストラップテーマあり) ここに画像の説明を入力

于 2018-06-10T07:11:26.173 に答える