Select2 应用引导输入-lg

Posted 2023-05-07

【中文标题】Select2 应用引导输入-lg

【英文标题】：Select2 apply bootstrap input-lg

【发布时间】：2016-01-26 17:26:12

【问题描述】：

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

【问题讨论】：

jsfiddle.net/o2Lcru85

这很好用，谢谢

【参考方案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 以便能够管理尺寸，但我似乎可以在没有“完整”版本的情况下使用它

【参考方案2】：

要使 select 的输入高度相等，请在 CSS 中进行以下更改并从 <select> 中删除 input-lg 选择器，这是不必要的，也不要使用它

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

Fiddle

【讨论】：

这行得通。但是对于它的价值，您不需要任何 !important 声明。唯一缺少的是width: 100% !important - 需要!important，因为Select2 根据其容器的外部宽度计算元素的宽度（因此忽略填充）。这里的width 声明考虑了填充。

【参考方案3】：

在您的 css 中，在您的 class .select2-container 示例之前放置 input-lg+：`

.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 示例

【参考方案4】：

您只需通过下载 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"
);

（没有引导主题）

（带有引导主题）

【参考方案5】：

虽然 select2-bootstrap-theme 适用于 Bootstrap v3，但您可以将其用于 Bootstrap v4。

安装

$ npm install @ttskch/select2-bootstrap4-theme

用法

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

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

这是它的Demo