Twitter Bootstrap: How to layout multiple input-prepend's side-by-side on one row

Question

After tirelessly going through the Bootstrap docs, I just can't seem to layout the below input-prepend addon inputs (underlined in yellow) the way I need on this form:

You will notice the layout for the 'Actual Door Size' row is incorrect and not laying out properly. I am working with the standard row-fluid and span* conventions and it is working great for the rest. I am really just wanting to make a neat Height/Width/Depth prepended input option set which are floated all next to each other (and does not overflow), however it is important I am taking full advantage of bootstrap to ensure the fields then drop underneath each other on mobile devices, as this form will be primarily accessed via iPad.

If anybody could suggest some alterations to the below HTML to provide a neat way of laying out these three input's that would be great (ignore the fact the addons are mismatching height, I will be fixing that).

I have also included the 'sealed top bottom / finish of door' row so you can see how I am doing my two-column approach which IS working great.

<!-- CULPRIT START -->
<div class="row-fluid">
    <div class="span12">
        <div class="span4">
            <div class="control-group">
                <label for="ActualDoorSizeHeight" class="control-label">Actual Door Size:</label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on">H</span><input id="ActualDoorSizeHeight" class="input-block-level" type="text" data-bind="value: vm.ActualDoorSizeHeight" />
                    </div>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="control-group">
                <label for="ActualDoorSizeHeight" class="control-label"></label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on">W</span><input id="Text5" class="input-block-level" type="text" data-bind="value: vm.ActualDoorSizeWidth" />
                    </div>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="control-group">
                <label for="ActualDoorSizeHeight" class="control-label"></label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on">D</span><input id="Text11" class="input-block-level" type="text" data-bind="value: vm.ActualDoorSizeDepth" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- // CULPRIT END -->
<div class="row-fluid">
    <div class="span12">
        <div class="span6">
            <div class="control-group">
                <label for="SealedTopBottom" class="control-label">Sealed Top Bottom:</label>
                <div class="controls">
                    <input id="SealedTopBottom" type="text" class="input-block-level" data-bind="value: vm.Inspection.SealedTopBottom" />
                </div>
            </div>
        </div>
        <div class="span6">
            <div class="control-group">
                <label for="FinishOfDoor" class="control-label">Finish of Door:</label>
                <div class="controls">
                    <input id="FinishOfDoor" type="text" class="input-block-level" data-bind="value: vm.Inspection.FinishOfDoor" />
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I think what you want is a combination of input prepend with form-inline, rather than using spans. http://twitter.github.io/bootstrap/2.3.2/base-css.html#forms

I've just had a quick go on JSFiddle. Give this a try and see if it works for you: http://jsfiddle.net/6jAhe/

<!-- CULPRIT START -->
<div class="row-fluid">
    <div class="span12">
        <div class="control-group form-inline">
            <label for="ActualDoorSizeHeight" class="control-label">Actual Door Size:</label>
            <div class="input-prepend">
                <span class="add-on">H</span><input id="ActualDoorSizeHeight" class="" type="text" data-bind="value: vm.ActualDoorSizeHeight" />
            </div>
            <div class="input-prepend">
                <span class="add-on">W</span><input id="Text5" class="" type="text" data-bind="value: vm.ActualDoorSizeWidth" />
            </div>
            <div class="input-prepend">
                <span class="add-on">D</span><input id="Text11" class="" type="text" data-bind="value: vm.ActualDoorSizeDepth" />
            </div>
        </div>
    </div>
</div>
<!-- // CULPRIT END -->