html - Twitter Bootstrap 嵌套表单布局

Question

我刚刚开始使用 Bootstrap 。我需要定位三个输入字段以形成一个“地址”字段。

我试过使用下面的 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"/>

这几乎是正确的，但尺寸有点偏差

有没有更好的方法来实现这种布局(无需自定义样式来实现正确的宽度)？

Answer 1

尝试使用以下内容:

<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>

的 这是一个fiddle