Select2 다중 선택은 부트 스트랩 4 인라인 형태로 축소합니다.

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%

함께 할 수있는 부모의 지정된 폭이 있습니까.

https://jsfiddle.net/wcy2L3pj/

는 그 바이올린에 코드를 넣고 row 부모와 축소 정지에 style="width: 100%;"을 추가했다. 너비 정의를 움직이면 다른 모든 요소에서 백분율 값을 사용해도 축소가 멈추지 않는다는 것을 알 수 있습니다.

그러나 style="width: 100%;"을 style="width: 250px;" (특정 픽셀 값)으로 바꾸면 축소 문제가 중지됩니다. 이는 Select2가 초기화에서 설정 한 width: 100%으로부터 그릴 수있는 정의 된 구체적인 값이 있기 때문입니다.