Twitter bootstrap nesting form layouts

html, twitter-bootstrap

Solution

Try using the following:

<div class="container">
<div class="row">
    <div class="span6 offset1">
        <form>
            <label for="street">Address</label>
            <div class="controls controls-row">
                <input type="text" class="span3" id="street" name="street" placeholder="Street"/>
            </div>
            <div class="controls controls-row">
                <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/>
                <input type="text" id="city" class="span2" placeholder="City"/>
            </div>
        </form>
    </div>
</div>

​ Here is a fiddle

Problem

I am just getting started using bootstrap. I need to position three input fields to form an "address" field. I have tried using the following html: ``` <label for="street">Address</label> <input class="span3" id="street" name="street" placeholder="Street"/><br/> <input id="zipcode" class="span1 inline" placeholder="Zipcode"/> <input id="city" class="span2 inline" placeholder="City"/> ``` This is almost correct but the size is a bit off Is there a better way to achieve this layout (without having to make custom styles to achieve the correct width)?

Original source