twitter-bootstrap - Select2 应用 Bootstrap 输入-lg

Question

如何在 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 版

Answer 1

我找到了 dedicated 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是 told to be required能够管理尺寸，但我似乎在没有“完整”版本的情况下让它工作