twitter-bootstrap Select2 应用引导输入-lg
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33365640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 apply bootstrap input-lg
提问by MadzQuestioning
How can I implement input-lg class in a select2 dropdown? I wan't my dropdown to have the same size as an input element having a class of input-lg here's what I have so far
如何在 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>
And here is my script
这是我的脚本
<script>
$(document).ready(function(){
$('select').select2();
});
</script>
But It seems that once initialized the dropdown is not the same size as an input field having a class of input-lg eventhough I placed a class of input-lg on my select element. Any idea on how to implement this? I just want the select2 to have the same height as the input field
但是似乎一旦初始化下拉列表与具有 input-lg 类的输入字段的大小不同，即使我在我的 select 元素上放置了一个 input-lg 类。关于如何实现这一点的任何想法？我只希望 select2 与输入字段具有相同的高度
I'm using select2 version 4.0.0 and the css is version 3.5.2 I think
我正在使用 select2 版本 4.0.0 而 css 是版本 3.5.2 我认为
采纳答案by Pierre de LESPINAY
I found this dedicated CSS(select2-bootstrap-theme) to work quite well.
我发现这个专用的 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.jsis told to be requiredto be able to manage the sizes, but I seemed to get it working without the "full" version
select2.full.js被告知需要能够管理尺寸，但我似乎在没有“完整”版本的情况下工作
回答by Shehary
To make selectequal in height of input, make following changes in CSS and remove input-lgselector from <select>it's unnecessary and no use of it
要使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>回答by Eder Moraes
In your css place input-lg+ before you class .select2-container example: `
在你的 css 地方 input-lg+ 在你类 .select2-container 示例之前：`
.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;
}
` using @Shehary example
` 使用@Shehary 示例
回答by Somwang Souksavatd
all you need is just set select2 to use bootstrap themes by download select2 add-on CSS
您只需要通过下载 select2 附加 CSS 将 select2 设置为使用引导程序主题
https://github.com/select2/select2-bootstrap-theme
https://github.com/select2/select2-bootstrap-theme
<link href="js/select2-bootstrap-theme/dist/select2-bootstrap.min.css" rel="stylesheet">
then on JS part
然后在 JS 部分
$('.select2').select2({
theme: "bootstrap"
});
(without bootstrap-theme)
（没有引导主题）
(with bootstrap-theme)
（带有引导程序主题）
回答by Hamza Khanzada
While select2-bootstrap-theme is for Bootstrap v3, You can use this for Bootstrap v4.
虽然 select2-bootstrap-theme 适用于 Bootstrap v3，但您可以将其用于Bootstrap v4。
Installation
安装
$ npm install @ttskch/select2-bootstrap4-theme
$ npm install @ttskch/select2-bootstrap4-theme
Usage
用法
<link rel="stylesheet" href="/path/to/select2.css">
<link rel="stylesheet" href="/path/to/select2-bootstrap4.css">
$('select').select2({
theme: 'bootstrap4',
});
And here is its Demo
这是它的演示
