Bootstrap 4 选择2，引导主题不符合输入组类_Bootstrap 4_Jquery Select2

Bootstrap 4 选择2，引导主题不符合输入组类

bootstrap-4

Bootstrap 4 选择2，引导主题不符合输入组类,bootstrap-4,jquery-select2,Bootstrap 4,Jquery Select2,我试图将select2与输入组一起使用，但该按钮始终位于select2控件后的下一行。如果删除select2类，它将按预期工作。如果select2引导基于引导主题，为什么它不支持标准引导输入组类？我缺少什么来确保它们都在同一行上并作为一个组显示没有选择2类（以及我希望它的外观）选择2 选择2并添加style=“width:75%”（底部关闭）去 $（“.select2”）。选择2({ 主题：“引导”，占位符：“搜索” } ); 是的，Select2中的默认引导样式与引导不太兼容

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

没有选择2类（以及我希望它的外观）

选择2

选择2并添加style=“width:75%”（底部关闭）



去
$（“.select2”）。选择2({
主题：“引导”，
占位符：“搜索”
} );

是的，Select2中的默认引导样式与引导不太兼容。您需要编写一些自定义样式以获得所需的样式：

.input group>。选择2容器--引导{
宽度：自动；
flex:1自动；
}
.input group>.select2容器—引导。select2选择—单个{
身高：100%；
行高：继承；
填充：0.5雷姆1雷姆；
}

Select2具有固定的伪造搜索框宽度和高度。你必须重新设置它们。您还需要启用fakery搜索框的增长和收缩功能，使用

flex:1 auto

演示：
是的，Select2中的默认引导样式与引导不太兼容。您需要编写一些自定义样式以获得所需的样式：
.input group>。选择2容器--引导{
宽度：自动；
flex:1自动；
}
.input group>.select2容器—引导。select2选择—单个{
身高：100%；
行高：继承；
填充：0.5雷姆1雷姆；
}

Select2具有固定的伪造搜索框宽度和高度。你必须重新设置它们。您还需要启用fakery搜索框的增长和收缩功能，使用flex:1 auto

演示：
<!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>