thêm nhập văn bản vào các nút radio nội tuyến

Question

Cách Bootstrappy bổ sung một văn bản ngắn INPUT vào một hàng của các nút radio nội tuyến là gì?

Tôi đã cố gắng gói trong một <div class="col-xs-2"> ở bên phải của danh sách các nút radio, nhưng điều đó đặt nó vào không gian lưới riêng của mình, tất nhiên.

Dưới đây là bootply tôi cố gắng thêm vài biến thể, không ai trong số đó có được kết quả mong muốn của một trường văn bản nội tuyến với radio ngang: http://www.bootply.com/95891

Điều duy nhất mà sắp xếp của công trình được thiết lập một pixel chiều rộng rõ ràng về các INPUT, nhưng điều đó không ở trong hàng nội tuyến như hình thức có kích thước nhỏ hơn.

Answer 1

Bạn có thể sử dụng .form-inline, sau đó bạn sẽ không phải sửa chữa bất kỳ chiều rộng trên bạn input:text:

<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