如果选择了带有长文本的选项，则选择元素 100% 宽度错误（Select2 引导主题）答案

【问题标题】：Select element 100% width bug if option with long text is selected (Select2 bootstrap theme)如果选择了带有长文本的选项，则选择元素 100% 宽度错误（Select2 引导主题）
【发布时间】：2015-10-28 03:27:14
【问题描述】：

如果选择了带有长文本的选项并且元素的宽度为 100%，我正在使用带有 bootstrap 3 主题的 select2 和 select2 元素溢出容器。

这只发生在 Mozilla Firefox 中！！

我创建了一个example

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

这是影响元素溢出的代码

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

【问题讨论】：

我认为这可能是一个已知问题，但我现在没有 Firefox 来测试它。如果您删除 Bootstrap 主题并仅使用默认主题，是否仍然会出现溢出问题？
是的。现在我用 templateSelection 解决了，但这不是正确的方法。

标签： jquery twitter-bootstrap-3 jquery-select2

【解决方案1】：

设置内联样式：

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

评论.select2-container额外的css：

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

在 select2 初始化时添加“元素”宽度：

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

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

如果您使用的是引导程序，请尝试 this 解决方案，改编自 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 {

【讨论】：

【解决方案2】：

这对我有用，将 select2 与 bootstrap 4 一起使用：

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

【讨论】：

【解决方案3】：

如果你使用引导程序，那么它可以工作。

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

【讨论】：

【解决方案4】：

放入jQuery：

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

【讨论】：

【解决方案5】：

在你的主 CSS 文件中添加这一行

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

【讨论】：