带有 Bootstrap 主题的 Select2 不支持输入组类
Gee*_*ekn 2 jquery-select2 bootstrap-4
我正在尝试将 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>
是的，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/
| 归档时间： |
|
| 查看次数： |
5072 次 |
| 最近记录： |