bootstrap-4 - 带有 Bootstrap 主题的 Select2 不支持输入组类

问题描述

我正在尝试将 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-4jquery-select2

是的，来自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/

bootstrap-4 - 带有 Bootstrap 主题的 Select2 不支持输入组类

问题描述

解决方案

推荐阅读