Question

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

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

但他们都没有为我工作

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

Answer 1

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

对于任何标准来说，这都不是很好，但在修复bug之前似乎对我来说很好，

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

Answer 2

在这种情况下使用固定宽度并使用overflow：auto然后你可以用div或任何标签来限制

Answer 3

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

在输入组上的

我将显示从表格更改为阻止，这有效：）

Select2 width问题，控件覆盖父宽度

3 个答案: