부트 스트랩 - 입력 그룹 -btn이 입력 그룹에 걸리지 않습니다.

Question

부트 스트랩에 익숙하며 웹 앱에서 구현하려고합니다. 3 개의 다른 부분을 그룹화하여보기 좋게하려고하지만 아래 코드의 결과로 <button>이 브라우저의 오른쪽으로 이동합니다.

나는 이것이 같은 행에 있기 때문에 그룹화가 작동한다고 생각합니다. 그러나 어쨌든 <button>은 여전히 ​​<input/>에 클립하지 않습니다. 내 코드를 생성하려면 참조/예제로 This bootstrap components 페이지를 사용했습니다.

내 질문 :<input/>에 <button>을 "클립/스냅"으로 만들려면 어떻게해야합니까? 이것은

Answer 1

사용하는 클래스 pull-left : (참고 : 다른 텍스트가 포함되어 있지만 코드는 동일입니다)

<div class="input-group"> 
<div class="input-group-addon"> 
    Add project: 
</div> 
<input type="text" class="form-control input-group" placeholder="Type new project here"/> 
<div class="input-group-btn"> 
    <button type="button" class="btn btn-default ">Add</button> 
</div> 

이 내 결과는 모습입니다 그것을 <input/>으로 집어 넣을 것입니다. 아래 업데이트 된 코드보기 :

<div class="input-group"> 
<div class="input-group-addon"> 
    Add project: 
</div> 
<input type="text" class="form-control input-group" placeholder="Type new project here"/> 
<div class="input-group-btn pull-left"> <!-- add pull-left here --> 
    <button type="button" class="btn btn-default ">Add</button> 
</div>