Question

编辑：这是由某人长时间制造的模糊height: 34px !important;引起的 - 从不信任旧代码。评论并完美地工作。感谢Calvin Nunes提出的片段内容和Tayyab Khan带来的高度问题让我想到了它。当我试图重现行为时，我想到了 ctrl + f - 旧的css文件。我无法在代码检查中找到它，但是...很抱歉给您带来不便。

我在这里工作，我们使用ASP.NET MVC 5，Bootstrap（v3.3.7），jQuery（v2.2.3），我们使用Select2插件（v4.0.5）。问题是，当我使用<select multiple></select>并选择足够的选项以使其破坏链接时，高度会增加，但父级不会跟随，使其与下一行重叠。是什么导致这个和/或如何解决它的想法？这就是：

断线前：

突破后：

我查看了select2示例，并且看不出实现方面的差异，并且它完美地运行...我在两者上打开代码检查以查找任何相关的差异而无法找到。也许我错过了什么。

标记是这样的：

<div class="row">
    <div class="col-md-12">
        <select id="contatos" class="form-control" multiple></select>
    </div>
</div>

脚本是这样的：

$('#contatos').select2({
    tags: true,
    tokenSeparators: [',', ' ', ';'],
    dataMiminumInputLength: 2,
    ajax: {
        url: '/Gerenciamento/Usuario/PesquisarUsuarios/',
        data: function (params) {
            return {
                termo: params.term
            };
        },
        processResults: function (data) {
            var results = [];
            $(data).each(function (i, el) {
                results.push({
                    id: el.desEmail,
                    text: el.desNome + ' | ' + el.desEmail,
                    codUsuario: el.codUsuario,
                    desEmail: el.desEmail
                });
            });
            return { results: results }
        },
        delay: 400
    }
});

注意：在此应用程序中选择倍数的所有使用都会发生这种情况。

Answer 1

你的css问题你在页面中添加了select2-bootstrap.css吗？检查它，因为select2 css在它中为bootstrap给出你可以检查第10行的高度。它应该是自动的

.form-control.select2-container {
    height: auto !important;
    padding: 0;
}

Answer 2

转变为CSS问题......曾经有人认为使用.select2-container, .select2-selection--single { height: 34px !important; }是个好主意。两个问题：important!和height。如果使用min-height，则此问题不会发生，但!important是不可原谅的。谢谢，抱歉！

选择2多个父级不改变换行高度

2 个答案: