부트 스트랩 태그 입력이 .input-group을 깨뜨림

Question

내 응용 프로그램에서 매우 우수한 bootstrap-tagsinput을 사용하고 있지만 부트 스트랩 3 input-group과 결합하려고하면 입력 그룹이 중단됩니다.

해결 방법이 있습니까? 여기

jsFiddle :는 http://jsfiddle.net/cp5Lvtdo/2/

스크린 샷 :

는

코드 :

<form id="defaultForm" method="post" class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-lg-3 control-label">Cities</label> 
     <div class="col-lg-5"> 
      <div class="input-group"> 
      <input type="text" name="cities" id="aa" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" /> 
       <div class="input-group-addon"> 
        Addon text 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-lg-3 control-label">Cities</label> 
     <div class="col-lg-5"> 
      <div class="input-group"> 
      <input type="text" name="cities" id="aa" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" /> 
       <button type='button' class='btn btn-primary input-group-btn'> 
        Button text 
       </button> 
      </div> 
     </div> 
    </div> 
</form> 

Answer 1

우선 당신은 D 필요 오 다음은 이러한 변화와 바이올린의

.input-group .bootstrap-tagsinput { 
    width: 100%; 
    margin-bottom: 1px; 
} 

다음이

<span class='input-group-btn'> 
       <button type='button' class='btn btn-primary'> 
        Button text 
       </button> 
       </span> 

처럼 보이도록하여 버튼 코드를 변경하여 입력 그룹이 CSS를 추가 할 것입니다 http://jsfiddle.net/cp5Lvtdo/3/