2013-11-21 5 views
5

인라인 라디오 버튼 행에 짧은 텍스트 INPUT을 추가하는 것은 부트 스트 래피 한 방법은 무엇입니까?인라인 라디오 버튼에 텍스트 입력 추가

라디오 버튼 목록의 오른쪽에 <div class="col-xs-2">으로 줄 바꿈을 시도했지만, 물론 그 자체의 격자 공간에 넣습니다. 정렬의 작품에 명시 적 픽셀 폭을 설정하는 것입니다 http://www.bootply.com/95891

유일한 :

여기에 수평 라디오 인라인 텍스트 필드의 원하는 결과를 얻을 어느 것도 몇 가지 더 변형을 시도 내 bootply입니다 INPUT이지만 폼의 크기가 작아지면서 인라인 행에 머물러 있지 않습니다.

답변

9

당신이 어떤 폭을 해결하기 위해 .form-inline을, 당신은하지 않습니다 사용할 수 있습니다 귀하의 input:text :

enter image description here

<div class="container"> 
    <form class="form-inline" role="form"> 
    <div class="form-group"> 
     <label class="control-label">Amount</label> 
    </div> 
    <div class="form-group"> 
     <div class="radio"> 
     <label class="radio-inline control-label"> 
      <input type="radio" id="amount_25" name="amount" value="25" checked=""> 
      $25.00 
     </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="radio"> 
     <label class="radio-inline control-label"> 
      <input type="radio" id="amount_50" name="amount" value="50"> 
      $50.00 
     </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="radio"> 
     <label class="radio-inline control-label"> 
      <input type="radio" id="amount_100" name="amount" value="100"> 
      $100.00 
     </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="radio"> 
     <label class="radio-inline control-label"> 
      <input type="radio" id="amount_other" name="amount" value="Other: $"> 
      Other: $ 
     </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <input placeholder="Amount" type="text" class="form-control" id="amount_actual" name="amount_actual" maxlength="5" data-rule-required="true" contenteditable="false"> 
    </div> 
    </form> 
</div> 

Bootply

관련 문제