I've been scratching my head for some time now regarding Twitter-Bootstrap input width / CSS classes. I have a form with client address information. I would like to make "Name" (First name, middle name and last name) and inline form/row, where the three input's result in equal width of the rest of the inputs (using class="input-xxlarge"
).
When i use the "input-*" (ex. "input-small") on each input, they are either too wide, or too narrow (in total).
<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 a percent width (inline) isn't the solution either. Is there anyone who has been able to do this, so both left and right side fits "perfect" with the rest of the inputs (incl. responsive)?
Is there any way to define a "row" which equals the width of "input-xxlarge", and use spanX (ex. span4) on each input in a "control-group" > "controls".
<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's (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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With