Select2 with Bootstrap theme not honoring input group class

Question

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

没有 select2 class（以及我希望它看起来如何）

使用 Select2

使用 Select2 并添加样式="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>

Answer 1

是的，Select2 中的默认 bootstrap 样式在 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/

Answer 2

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

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

.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;
}

Answer 3

我更新了@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;
        }

Answer 4

只需删除：

.select2 {
  width: 100% !important; }

来自select2CSS。它会起作用。

Answer 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()。例如在页尾或发生此问题的事件后。

尽情享受吧！

Select2 with Bootstrap theme not honoring input group class

Select2 with Bootstrap theme not honoring input group class

jquery-select2

bootstrap-4