如果选择长文本选项，则选择元素100%宽度错误(Select2 bootstrap主题)

Question

我使用select2与bootstrap 3主题和select2元素溢出容器，如果选择长文本选项和元素的宽度是100%。

这只发生在Mozilla Firefox中!!

我创建了一个示例

.select2-container {
  width: 100% !important;
}

是影响元素溢出的代码

span.select2-selection__rendered {
  white-space: nowrap;
}

Answer 1

设置行内样式:

<select class="select2" style="width:100%">

Comment .select2-container extra css:

/*.select2-container {
    width: 100% !important;
}*/

为select2添加"element"宽度:

$('.select2').select2({
     width: 'element',
    minimumResultsForSearch: Infinity
  });
});

示例:http://jsfiddle.net/chemark/z9sLqLbx/

如果你正在使用bootstrap，试试这个解决方案，改编自github上的一篇文章:

.form-group .select2-container {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table;
  table-layout: fixed;
}

如果您使用的是输入组而不是表单组，那么将第一行更改为:

.input-group .select2-container {

Answer 2

这对我来说是有效的，使用select2和bootstrap 4:

.select2-container{ width: 100% !important; }

Answer 3

如果你使用的是bootstrap，那么它的工作

.form-group > .select2-container {
    width: 100% !important;
}

Answer 4

将这一行添加到你的主CSS文件

.select2-container{ width: 100% !important; }

Answer 5

插入jQuery:

$('.select2-container').css("width","100%");