트위터 부트 스트랩 - 잘못된 순서의 필드

Question

나는 부트 스트랩을 좋아하지만, 손이 닿지 않는듯한 단점은 간단한 텍스트 입력 상자로 시작하는 양식을 만들고 오른쪽에 몇 가지 라디오 버튼 (전통적인 유형은 아니지만 부트 스트랩은 "버튼 그룹"이라고 함). 안타깝게도 입력 상자는 엄숙하게 왼쪽으로 이동하는 것을 거부하며 항상 스택 오른쪽으로 배를 뛰어 넘습니다. 왜 오 왜? 어떤 도움을 주셔서 감사합니다. 여기

양식의 모습의 사진입니다 :

그리고 여기이 돌연변이 재해로 이끄는 코드 :이 사람들이 저를 해결하는 데 도움이되는 충분한 정보입니다

<div class="control-group"> 
    <label class="control-label" for="appendedInput">Weight recorded:</label> 
    <div class="controls"> 
     <div class="input"> 
      <input class="input-small" id="weight" size="16" type="text" placeholder="weight" ready-for-history></input> 
      <span class="btn-group" data-toggle="buttons-radio"> 
       <button class="btn active">lbs</button> 
       <button class="btn">kg</button> 
       <button class="btn">stone</button> 
      </span> 
     </div> 
     <p class="help-block">What weight were you?</p> 
    </div> 
</div> 

희망 ; 더 필요한 것이 있으면 알려주세요.

Answer 1

Esailija가 정확합니다. 버튼은 입력 상자를 플로팅하려는 경우 왼쪽으로 떠있었습니다. 당신은 몇 가지 간단한 CSS와 함께이 작업을 수행 할 수 있습니다

#weight{float:left} 

또는

.input-small{float:left} 

또는

당신은 모든 제어 그룹의 요소는 인라인으로 표시되는지 확인하기 위해 트위터 부트 스트랩 form-inline 클래스를 사용할 수 있습니다 (의 올바른 순서). Esailija 및 Eterps 나를 올바른 궤도에 초점을 받고 도움을 한 번, 또는 <div class="form-inline"> ... </div>

Answer 2

에 양식 필드를 포장하여 <form> 태그에 form-inine 클래스를 추가하여이 작업을 수행 나는이 문제를 해결하기 위해 두 개의 CSS 클래스를 추가했다. 다음과 같이 그들은 :

.padded-left-form { 
    float: left; 
    margin-right: 3px; 
} 

.clear-left-form { 
    clear:both; 
    float:left; 
} 

I 부착이 라디오 버튼의 왼쪽 다음은 "다음에 부착하는 명확한 왼쪽 형식을 필요로 떠 텍스트 입력 상자에 .padded 왼쪽 형태 도움말 블록 "을 사용하여 수직으로 올바른 위치로 가져옵니다. 결국

는 다음과 같이 표시됩니다

버튼은 남아 있습니다