Twitter-Bootstrap input string width (firstname, middlename and lastname)

Question

I'm already scratching my head a bit regarding CSS-Bootstrap input / load widths. I have a form with information about the client address. I would like to make a “First Name” (first name, middle name and last name) and an embedded form / line where the three input results are equal to the width of the other inputs (using class="input-xxlarge" ).

When I use "input- *" (for example, "input-small") on each input, they are too wide or too narrow (in general).

 <div class="control-group"> <label class="control-label" for="FirstName">Name</label> <div class="controls"> <input class="input-small" id="FirstName" name="FirstName" placeholder="First name" type="text" value="" /> <input class="input-small" id="MiddleName" name="MiddleName" placeholder="Middle name" type="text" value="" /> <input class="input-small" id="LastName" name="LastName" placeholder="Last name" type="text" value="" /> </div> </div> 

http://jsfiddle.net/RXGKN/

Setting the percentage width (inline) is also not a solution. Is there anyone who could do this, so that the left and right sides fit "perfectly" with the rest of the inputs (including responsiveness)?

Is there a way to define a "string" that is equal to the width of "input-xxlarge", and use spanX (like span4) for each entry in "control-group"> "controls".

Answer 1

 <div class="control-group"> <label class="control-label" for="FirstName">Name</label> <div class="controls row-fluid"> <div class="span2 row"><input class="span12" id="FirstName" name="FirstName" placeholder="Firstname" type="text" value="" /></div> <div class="span2 row"><input class="span12" id="MiddleName" name="MiddleName" placeholder="Middlename" type="text" value="" /></div> <div class="span2 row"><input class="span12" id="LastName" name="LastName" placeholder="Lastname" type="text" value="" /></div> <p class="help-block span12 row" style="color: red;">How do I make these 3 input (together) equal width of the "Adresse" input.</p> </div> </div> <div class="control-group"> <label class="control-label" for="AddressLine1">Adresse</label> <div class="controls row-fluid"> <div class="span6 row"><input class="span12" id="AddressLine1" name="AddressLine1" placeholder="AddressLine1" type="text" value="" /></div> </div> </div> 

http://jsfiddle.net/baptme/RXGKN/2/