Cách nhận dữ liệu đầu vào có nối/thêm vào để có độ rộng phù hợp với twitter bootstrap

Question

Có cách nào để có đầu vào đã nối và/hoặc thêm vào tất cả các chiều rộng phù hợp không?

Dưới đây là một ví dụ, nhưng bạn có thể thấy rằng có nhiều đầu vào có phụ thêm/độ dài khác nhau, tất cả sẽ kết thúc với độ rộng khác nhau và trông sẽ không đẹp lắm.

http://jsfiddle.net/PLkfq/1/

Answer 1

Nếu bạn muốn trở thành điểm ảnh chính xác, quên lớp học và áp dụng phong cách để Id

thêm một id vào phút trải rộng

<span id="minutes" class="add-on">minutes</span> 

và sử dụng bit này của css

#service_name{width:200px;} 
#service_duration{width:130px;} 
#minutes{width:70px;} 

http://jsfiddle.net/baptme/PLkfq/4/

Answer 2

bạn có thể sử dụng jQuery:

$(document).ready(function(){ 
var normal_width = $("#service_name").width(); 
var add_on = $(".add-on").width(); 
var after_width = normal_width-add_on+3; 
$("#service_duration").width(after_width); 
}); 

bằng phương pháp này bạn có thể đặt bất kỳ kích thước cho đầu vào của bạn

http://jsfiddle.net/PLkfq/25/

Answer 3

Thay vì xác định các span1 lớp trên đầu vào append, hãy thử sử dụng đầu vào -Trung bình. Chiều rộng đầu vào có đồng nhất nhưng nhãn phụ sẽ thay đổi theo kích thước nội dung có vẻ ổn. Nếu bạn không thích điều đó, bạn có thể đặt chiều rộng tối thiểu trên lớp bổ trợ để làm cho chúng có cùng kích thước.

http://jsfiddle.net/PLkfq/40/

<div class="container-fluid"> 
<div class="span12"> 
    <div class="row-fluid"> 
     <form class="form-horizontal"> 
      <fieldset> 

       <div class="control-group string required"> 
       <label class="string required control-label" for="service_name"> 
        <abbr title="required">*</abbr> Service name</label> 
        <div class="controls"> 
        <input class="string required" id="service_name" name="service[name]" size="50" type="text"> 
        </div> 
       </div> 

       <div class="control-group integer required"> 
       <label class="integer required control-label" for="service_duration"> 
        <abbr title="required">*</abbr> Duration</label> 
        <div class="controls"> 
        <div class="input-append"> 
         <input class="numeric integer required input-medium" id="service_duration" name="service[duration]" type="text"><span class="add-on">minutes</span> 
        </div> 
        </div> 
       </div> 
        <div class="control-group integer required"> 
       <label class="integer required control-label" for="service_sec"> 
        <abbr title="required">*</abbr> Seconds</label> 
        <div class="controls"> 
        <div class="input-append"> 
         <input class="numeric integer required input-medium" id="service_sec" name="service[sec]" type="text"><span class="add-on">sec</span> 
        </div> 
        </div> 
       </div> 
      </fieldset> 
     </form> 
    </div> 
</div>