Select2应用引导程序输入-lg

Question

如何在select2下拉列表中实现input-lg类？我不希望下拉菜单的大小与具有input-lg类的input元素的大小相同，这是到目前为止的内容

<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>

但是似乎初始化后，下拉列表的大小与具有输入-lg类的输入字段的大小不同，尽管我在选择元素上放置了一个输入-lg类。关于如何实现这一点的任何想法？我只希望select2具有与输入字段相同的高度

我使用的是select2版本4.0.0，而CSS是版本3.5.2

Answer 1

我发现这个专用的 CSS (select2-bootstrap-theme) 工作得很好。

bower install select2-bootstrap-theme

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

bower install select2-bootstrap-theme

select2.full.js被告知需要能够管理尺寸，但我似乎在没有“完整”版本的情况下工作

Answer 2

要使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>

小提琴