带有 Bootstrap 主题的 Select2 不支持输入组类答案

【问题标题】：Select2 with Bootstrap theme not honoring input group class带有 Bootstrap 主题的 Select2 不支持输入组类
【发布时间】：2019-06-21 16:16:50
【问题描述】：

我正在尝试将 select2 与输入组一起使用，但按钮始终位于 select2 控件之后的下一行。如果您删除 select2 类，它会按预期工作。如果 select2 引导程序基于引导程序主题，为什么它不支持标准引导程序输入组类？为了确保它们都在同一行并作为一个组显示，我缺少什么？

没有 select2 类（以及我希望它的外观）

使用 Select2

使用 Select2 并添加 style="width:75%"（底部关闭）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" />
    <link rel="stylesheet" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.js"></script>
</head>
<body class="container">
    <p></p>
    <div class="input-group">
        <select class="form-control select2" placeholder="Search"></select>
        <div class="input-group-append">
            <button class="btn btn-success" type="submit">Go</button>
        </div>
    </div>
</body>
</html>

<script>
    $(".select2").select2({
        theme: "bootstrap",
        placeholder: "Search"
} );
</script>

【问题讨论】：

标签： bootstrap-4 jquery-select2

【解决方案1】：

是的，来自 Select2 的默认引导样式在 bootstrap 中效果不佳。你需要编写一些自定义样式来获得你想要的：

.input-group > .select2-container--bootstrap {
    width: auto;
    flex: 1 1 auto;
}

.input-group > .select2-container--bootstrap .select2-selection--single {
    height: 100%;
    line-height: inherit;
    padding: 0.5rem 1rem;
}

Select2 具有固定的伪造搜索框的宽度和高度。你必须重置它们。还需要开启伪造搜索框的增减功能，flex: 1 1 auto;。

演示： https://jsfiddle.net/davidliang2008/o0tLw56f/15/

【讨论】：

【解决方案2】：

只需删除：

.select2 {
  width: 100% !important; }

来自select2 CSS。它会起作用的。

【讨论】：

宾果游戏！在.input-group 中所需的所有内容

【解决方案3】：

我不得不结合 Bootstrap4 对我的样式表做一些小的修改。

我不得不使用 .select2-container--bootstrap4，而不是类 .select2-container--bootstrap。此外，我将所有属性标记为重要，如下所示：

.input-group > .select2-container--bootstrap4 {
    width: auto !important;
    flex: 1 1 auto !important;
}

.input-group > .select2-container--bootstrap4 .select2-selection--single {
    height: 100% !important;
    line-height: inherit !important;
}

【讨论】：

【解决方案4】：

我已经更新了@David 的答案，因为它对我来说效果不佳，边框不合适

.input-group > .select2-container--bootstrap, .input-group > .select2-container--default {
    width: auto;
    flex: 1 1 auto;
}

    .input-group > .select2-container--bootstrap .select2-selection--single,
    .input-group > .select2-container--default .select2-selection--single,
    .input-group > .select2-container--bootstrap .select2-selection--multiple,
    .input-group > .select2-container--default .select2-selection--multiple {
        height: 100%;
        line-height: inherit;
        border-radius: 4px 0 0 4px;
    }

        .input-group > .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
        .input-group > .select2-container--default .select2-selection--single .select2-selection__rendered,
        .input-group > .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered,
        .input-group > .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            height: inherit;
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-box-align: center !important;
            -ms-flex-align: center !important;
            align-items: center !important;
        }

        .input-group > .select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
        .input-group > .select2-container--default .select2-selection--single .select2-selection__arrow,
        .input-group > .select2-container--bootstrap .select2-selection--multiple .select2-selection__arrow,
        .input-group > .select2-container--default .select2-selection--multiple .select2-selection__arrow {
            height: inherit;
        }

【讨论】：

【解决方案5】：

我已经很好地解决了这个问题！您可以使用 ajax 重新绑定 select2 对象！请按照以下步骤操作：

1- 像这样在你的 html 页面中添加假 div

<div id="forreload"></div>

2- 使用此内容创建一个文件 EX：reloadtheme.html

<script>
$(function () {
    //Initialize Select2 Elements
    $('.select2').select2()
    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })

  })
</script>

3- 像这样在页面代码中添加 ajax 查询

function reloadpositions() {
        $.ajax({
            type: "GET",
            url: "reloadtheme.html" ,
            data: { temp: "0" },
            success : function(response){ //
                $("#forreload").html(response);
            }
        });
}

4- 现在在任何你想调用的地方调用 reloadpositions()。例如在页面末尾或发生此问题的一个事件之后。

享受吧！

【讨论】：