Select2 및 Bootstrap 3 CSS 문제

Question

부트 스트랩 3 기반 프로젝트에서 Select2 플러그인을 사용하고 있습니다. 한 가지 문제를 해결할 수있는 방법을 찾을 수 없습니다. 내가 .input-group의 일부처럼 select2를 사용하고 선택 값이 길 때 - 그것은 중개 구조입니다. (나는 select2를 부트 스트랩 스타일에 맞추기 위해 약간의 CSS를 만들었지 만, display: 스타일에는 영향을 미치지 않으므로 첨부하지 않았다.)

JS fiddle

내가 display: table-cell에 .input-group 다음 변화의 자녀 요소를 사용하고 있지만 부모 컨테이너에 맞게 요소를 강제 할 수 없다. 내가 작동하지 않기 때문에 을 .input-group으로 변경할 수 없습니다. table-layout을 변경하려고했으나 <table>과 다른 요소로 작동하지 않는 것 같습니다.

어떤 문제를 해결할 수 있습니까? PS. 이러한 요소들에 CSS 클래스를 추가 할 수는 없습니다.

Answer 1

dropdownAutoWith 옵션을 사용해보십시오.

$('select').select2({ 
    dropdownAutoWidth: true 
}); 

내 답변이 적용된 여기에 fork의 피들입니다.