Select2 宽度问题，该控件覆盖该父宽度答案

【问题标题】：Select2 width Issue, The control overrides that parent widthSelect2 宽度问题，该控件覆盖该父宽度
【发布时间】：2015-10-25 07:56:03
【问题描述】：

我在引导网格中使用 Select2 控件，但是当我从下拉列表中选择一个更大的值（这里我指的是宽度）时，它会扩展并覆盖由“col-md”指定的宽度" 引导类

虽然在类似问题上提到了许多解决方法 https://github.com/t0m/select2-bootstrap-css/issues/42

但没有一个对我有用

请指导。如何将宽度限制为其容器元素的宽度

【问题讨论】：

你的代码在哪里？如果您希望我们提供帮助，您必须共享一些代码。 Codepen 或 Fiddle 更好。
你有样品吗？或指向您网站的链接与指定问题？

标签： html css twitter-bootstrap ui-select2

【解决方案1】：

我还尝试了各种建议的解决方法，但没有任何效果。此外，我需要在调整窗口大小时正确调整 select2 控件的大小，因此我定义了一个 reset_select2_size 函数，每次调整大小都会调用该函数。尽管此处未显示，但只要 UI 组件中的任何更改需要重置该组件中的 select2 大小（例如，当包含 select2 的隐藏 div 变为可见时），也应调用此函数。

从任何标准来看，这都不漂亮，但在修复错误之前对我来说似乎工作正常，

function reset_select2_size(obj)
{
    if (typeof(obj)!='undefined') {
        obj.find('.select2-container').parent().each(function() {
            $(this).find('.select2-container').css({"width":"10px"});
        });

        obj.find('.select2-container').parent().each(function() {
            var width = ($(this).width()-5)+"px";
            $(this).find('.select2-container').css({"width":width});
        });
        return;
    }

    $('.select2-container').filter(':visible').parent().each(function() {
        $(this).find('.select2-container').css({"width":"10px"});
    });
    $('.select2-container').filter(':visible').parent().each(function() {
        var width = ($(this).width()-5)+"px";
        $(this).find('.select2-container').css({"width":width});
    });
}

function onWindowResized( event )
{
    reset_select2_size();
}

window.addEventListener('resize', onWindowResized );

【讨论】：

【解决方案2】：

在这种情况下，使用固定宽度并使用溢出：自动然后你可以限制 div 或任何标签的 with

【讨论】：

我不能使用固定宽度，它是一个响应式 UI，我能用的最好的是 Bootstrap 提供的 Col-MD ets

【解决方案3】：

我找到了解决问题的方法，

在输入组上，我将 Display 从 table 更改为 Block ，并且有效:)

【讨论】：