I've been grappling with the sizing of inputs in Twitter-Bootstrap for a while now. I have a form that requires client address details. Specifically, I want to align the "Name" section (containing First name, middle name, and last name) in a single row where all three input fields have equal widths compared to the other inputs (using the class="input-xxlarge").
However, when I apply different "input-*" classes (e.g., "input-small") to each input, they either end up being too wide or too narrow.
<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>
Simply setting a percentage width inline does not solve the issue. Has anyone successfully managed to achieve this alignment so that both sides seamlessly fit with the other inputs, including responsiveness?
Is there a method to create a row matching the width of "input-xxlarge" and utilize spanX (such as span4) on each input within a "control-group" > "controls" structure?