jQuery 如果选择带有长文本的选项，则选择元素 100% 宽度错误（Select2 bootstrap 主题）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31831064/
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
Select element 100% width bug if option with long text is selected (Select2 bootstrap theme)
提问by user3714967
I am using select2 with bootstrap 3 theme and the select2 element overflow container if option with long text is selected and width of element is 100%.
如果选择了带有长文本的选项并且元素的宽度为 100%，我正在使用带有 bootstrap 3 主题的 select2 和 select2 元素溢出容器。
This happens only in Mozilla Firefox!!
这只发生在 Mozilla Firefox 中！！
I create an example
我创建一个例子
.select2-container {
width: 100% !important;
}
This is the code which affect on element overflow
这是影响元素溢出的代码
span.select2-selection__rendered {
white-space: nowrap;
}
回答by chemark
Set inline style:
设置内联样式：
<select class="select2" style="width:100%">
Comment .select2-container extra css:
注释 .select2-container 额外的 css：
/*.select2-container {
width: 100% !important;
}*/
Add 'element' width on select2 init:
在 select2 init 上添加“元素”宽度：
$('.select2').select2({
width: 'element',
minimumResultsForSearch: Infinity
});
});
Example: http://jsfiddle.net/chemark/z9sLqLbx/
示例：http: //jsfiddle.net/chemark/z9sLqLbx/
If you are using bootstrap try thissolution instead, adapted from a post on github:
如果您正在使用引导程序，请尝试使用此解决方案，改编自 github 上的帖子：
.form-group .select2-container {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
display: table;
table-layout: fixed;
}
If you're using an input-group instead of a form-group, then change the first line to this:
如果您使用的是输入组而不是表单组，请将第一行更改为：
.input-group .select2-container {
回答by Ratto
This works for me, using select2 together with bootstrap 4:
这对我有用，将 select2 与 bootstrap 4 一起使用：
.select2-container{ width: 100% !important; }
回答by Satish Rabari
If you are use bootstrap then it works.
如果您使用引导程序，那么它可以工作。
.form-group > .select2-container {
width: 100% !important;
}
回答by Mohammad Rajpura
Put in jQuery:
放入 jQuery：
$('.select2-container').css("width","100%");