¿Cómo conseguir entradas con la función Añadir/anteponer a tener anchuras que emparejan con Twitter arranque

Question

¿Hay una manera de tener insumos que han de agregación y/o anteponer a todos los anchos de hacer juego?

Aquí hay un ejemplo, pero se puede ver que, dadas las múltiples entradas con anexos/antes de varias longitudes, todos serán anchos diferentes y no se verán muy bien.

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

Answer 1

Si quieres ser de píxeles precisos, se olvide de clases y aplicar estilo a los ID

añadir un id a las actas abarcan

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

y utilizar este bit de css

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

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

Answer 2

puede utilizar 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); 
}); 

por este método se puede establecer cualquier tamaño para sus entradas

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

Answer 3

En lugar de definir el SPAN1 clase en la entrada de datos anexados, intenta con el ingreso de -medio. El ancho de entrada será uniforme, pero la etiqueta de adición variará según el tamaño del contenido, lo que parece correcto. Si no te gusta, puedes establecer un ancho mínimo en la clase de complemento para hacer que todos tengan el mismo tamaño.

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>