Twitter bootstrap 选择2应用引导输入

如何在select2下拉列表中实现input lg类？我不希望我的下拉列表与一个输入元素的大小相同，它有一个输入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>

但是，一旦初始化，下拉列表的大小似乎与具有一类输入lg的输入字段的大小不同，尽管我在select元素上放置了一类输入lg。你知道如何实施吗？我只希望select2与输入字段具有相同的高度

我使用的是select2 4.0.0版，css是3.5.2版，我认为

要使select在输入高度上相等，请在css中进行以下更改，并从中删除输入lg选择器。这是不必要的，也没有使用它

$document.readyfunction{ $“选择”。选择2； }; 。选择2容器默认值。选择2选择单个{ 高度：46px！重要； 填充：10px 16px； 字号：18px； 线高：1.33； 边界半径：6px； } 。选择2容器默认值。选择2选择单个。选择2选择箭头b{ 排名：85%！重要； } .select2容器默认值。select2选择单个。select2-selection\u呈现{ 行高：26px！重要； } 。选择2容器默认值。选择2选择单个{ 边框：1px实心CCC！重要； 盒影：0px 1px 1px rgba0,0,0,0.075插页； 过渡：边框颜色0.15秒缓进0秒缓出0秒，框阴影0.15秒缓进0秒缓出0秒； } *国籍 *性别 男性的 女的 我发现这个select2引导主题非常有效

bower install select2-bootstrap-theme

---

select2.full.js能够管理大小，但我似乎在css中没有完整版本的情况下也能正常工作。在上课前放置input lg+。select2容器示例：`

.input-lg+.select2-container--default .select2-selection--single {
    height: 46px !important;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}
.input-lg+.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 85% !important;
}
.input-lg+.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
}
.input-lg+.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;
}

`

---

使用@Shehary示例

只需通过下载select2附加CSS将select2设置为使用引导主题即可

没有引导主题

带引导主题

---

虽然select2 bootstrap主题用于bootstrap v3，但您可以将其用于

装置

$npm install@ttskch/select2-bootstrap4-theme

用法

---

这是它的

非常好，谢谢你的作品。但无论如何，你不需要这些！重要宣言。唯一缺少的是宽度：100%！重要的是-这个！这一点很重要，因为Select2根据元素容器的外部宽度计算元素的宽度，从而忽略填充。此处的宽度声明考虑了填充。

.input-lg+.select2-container--default .select2-selection--single {
    height: 46px !important;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}
.input-lg+.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 85% !important;
}
.input-lg+.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
}
.input-lg+.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;
}

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

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

<link rel="stylesheet" href="/path/to/select2.css">
<link rel="stylesheet" href="/path/to/select2-bootstrap4.css">

$('select').select2({
   theme: 'bootstrap4',
});