html - Select2 宽度问题，控件覆盖父宽度

Question

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

though there are many workarounds mentioned on a similar issue https://github.com/t0m/select2-bootstrap-css/issues/42

但他们都不适合我

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

Answer 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 );