Select2 multiple select 在 bootstrap4 内联表单中收缩

Question

下面是演示我的问题的片段。问题是每当我输入时，该字段变得非常小。

$(function() {
  $("select").select2({
    placeholder: "Select a word",
    width: "100%"
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<div class="container">
<form class="form-inline">
<div class="form-group row">
<div class="col-sm-12">
<select multiple="multiple" name="word" id="word">
  <option value="1">A really long string</option>
</select>
</div>
</div>
</form>
</div>

如何防止字段缩小？

Answer 1

缩水与

有关

width: 100%

select 试图从父容器中获取它的宽度，但任何父容器都没有指定宽度。

https://jsfiddle.net/wcy2L3pj/

我将您的代码放入 fiddle 并将 style="width: 100%;" 添加到 row 父级，然后停止收缩。如果您尝试移动该宽度定义，您会在所有其他元素上看到，使用百分比值不会停止缩小。

但是，将 style="width: 100%;" 换成 style="width: 250px;"，一个特定的像素值，缩小问题就停止了。这是因为有一个定义的具体值，Select2 可以从其初始化中设置的 width: 100% 中提取。

Select2 multiple select 在 bootstrap4 内联表单中收缩

Select2 multiple select shrinks inside bootstrap4 inline form

html

css

jquery-select2-4

select2

bootstrap-4