Question

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

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

使用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>

Answer 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/

具有Bootstrap主题的Select2不尊重输入组类

1 个答案: