Cách kiểm soát kích thước đầu vào trong nhóm .input với .input-group-addon (Bootstrap3)?

Question

A có một biểu mẫu trong một bảng và tất cả các kích cỡ trường của tôi đều phù hợp. Nhưng tôi có một fieldfield có một addin-group-addon, đó là việc kiểm soát kích thước không hoạt động tốt. Có cách nào để khắc phục nó?

Tôi đã thử một số cách để làm cho một đầu vào nhỏ hơn, nhưng các addon dừng lại được kèm theo: http://jsfiddle.net/93MpC/1/

Mã từ Fiddle:

<div class="table-responsive"> 
<table class="table table-bordered"> 
    <tr class="form-group"> 
    <td><label class="field-label required-field">Name:</label></td> 
    <td><div class="input-group"> 
     <input type="text" name="name" required id="id_name" class="form-control"> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
    <td><label class="field-label">Birthdate:</label></td> 
    <td><div class="input-group"> 
     <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
    <td><label class="field-label">Birthdate:</label></td> 
    <td><div class="input-group"><div class="row"> 
     <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
     <td><label class="field-label">Birthdate:</label></td> 
     <td><div class="input-group"> 
     <div class="row"> 
      <div class="col-lg-3"> 
      <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div> 
      <div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div> 
      </div> 
      </div> 
     </div></td> 
    </tr> 
</table> 
</div> 

Cảm ơn trước!

Answer 1

HTML thích hợp cho yêu cầu này res một cấp độ làm tổ khác. Bạn có thể tìm thêm thông tin trong tài liệu input groups.

Các <td> với đầu vào và addon cỡ của bạn sẽ giống như thế này:

<td class="row"> 
    <div class="col-md-6"> 
     <div class="input-group"> 
      <input type="text" class="form-control"> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</td> 

Các .col-* lớp thêm padding trái và phải, vì vậy nếu đó là một vấn đề bạn có thể loại bỏ nó với một chút CSS.

Answer 2

Lấy từ mã của bạn, tôi đã thêm một nửa lớp vào div gốc. Dưới đây là các css:

.half { 
    width: 50%; 
} 

Và HTML (gần như giống nhau):

<div class="input-group half"><!-- here is .half --> 
    <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/> 
    <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 

Sửa Hoặc nếu bạn muốn sử dụng col đây là một lựa chọn khác nhau:

<div class="row"> 
    <div class="col-md-3"> 
    <div class="row"> 
     <div class="col-md-3">Birthdate:</div> 
     <div class="col-md-9"> 
     <div class="input-group"> 
      <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/> 
      <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Example