html - Select2 和 Bootstrap 3 CSS 问题

Question

我在基于 Bootstrap 3 的元素中使用 Select2 插件。我找不到解决一个问题的方法。当我使用 select2 作为 .input-group 的一部分时并且选择的值很长 - 它是经纪结构。 (我制作了一些 css 以使 select2 适合 Bootstrap 样式，但它不影响 display: 样式，所以我没有附加它)。

JS fiddle

当我使用 .input-group 时然后它将子元素更改为 display: table-cell但我不能强制元素适合父容器。我无法更改 max-width:的 .input-group因为它不工作。我确实尝试更改 table-layout但它似乎不适用于不同于 <table> 的元素.

有什么办法可以解决吗？附言。我无法向任何这些元素添加任何额外的 CSS 类。

Answer 1

您应该尝试使用 dropdownAutoWith 选项。

$('select').select2({
    dropdownAutoWidth: true
});

这是一个 fork你的 fiddle ，应用我的答案。