인라인 양식에서 입력 그룹 사용

Question

input-group을 form-inline에 붙이면 input-group은 다른 컨트롤과 인라인 대신 "새 줄"에 양식 아래에 나타납니다.

잘 작동 다른 입력이, inline-block 그들의 display 세트를 가지고 반면 input-group 래퍼 클래스가 table에 display 설정을 가지고 있기 때문에이 것 같습니다. 물론 add-on 스팬 (display: table-cell)이 올바르게 정렬되기 위해서는 부모의 속성이 필요하므로 input-group에 inline-block 디스플레이를 제공 할 수 없습니다.

그래서 내 질문은 :이 독점적으로 부트 스트랩 클래스를 사용하여 인라인 형태 내부 input-group를 사용할 수 있습니까? 그렇지 않은 경우 사용자 정의 클래스을 사용할 수있는 가장 좋은 방법은 입니다.

여기 내 요점을 설명하는 demo입니다. 코드는 다음과 같습니다.

<form action="" class="form-inline"> 
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/> 

    <div class="checkbox"> 
     <label> 
      <input type="checkbox" /> and Checkboxes 
     </label> 
    </div> 
    <select class="form-control" style="width: 150px;"> 
     <option>and Selects</option> 
    </select> 

    <button type="submit" class="btn btn-default">and Buttons</button> 
    <div class="input-group" style="width: 220px;"> 
     <span class="input-group-addon">BUT</span> 
     <input type="text" class="form-control" placeholder="not with input-groups" /> 
    </div> 
</form> 

Answer 1

이것은 실제로 버그 였고 해결되었습니다 (자세한 내용은 issue on github을 확인하십시오).

지금부터 BootStrap의 인라인 양식은 .form-group 인 하위 양식 컨트롤을 래핑해야합니다.

그래서 내 코드가 될 것이다 :

<form action="" class="form-inline"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    </div> 

    ... 
    <div class="form-group"> 
     <div class="input-group" style="width: 220px;"> 
      <span class="input-group-addon">BUT</span> 
      <input type="text" class="form-control" placeholder="not with input-groups" /> 
     </div> 
    </div> 
</form> 

Answer 2

원하는 인라인 레이아웃을 얻으려면 양식을 열로 분리해야 할 수도 있습니다. 예를 들어 (당신이 생각한 것) 부트 스트랩 사이트에 here입니다.

시도 무슨 뜻인지 확인하기 위해 컨트롤 주위에

<div class="col-lg-1"></div> 

퍼팅. 물론 12 열에서 작업해야하므로 적절하게 조정해야합니다.