Twitter引导程序嵌套表单布局

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

Answer 2

自定义装订线宽度和跨度宽度，我认为span24对于精确宽度，装订线宽度10px和span1 30px span2 70px等更好 ....告诉我你在使用SASS或LESS

如果sass

$gridColumns: 24
$gridColumnWidth: 30px
$gridGutterWidth: 10px

在你的sass文件中

，但不要忘记导入bootstrap sass文件

还有一件事 - 我忘记了你在使用twitter bootstrap时应该使用控制组和其他格式;请参考bootstrap网站

Answer 3

我想如果你刚刚使用了＆＃39; span2＆＃39; ＆安培; ＆＃39; SPAN1＆＃39;没有＆＃39; inline＆＃39;的课程它只会在网格中显示具有正确边距的布局。看起来这是造成错位的边缘。

Answer 4

所以我在这方面挣扎了一段时间，最后得到了解决方案。 Here's what I came up with。这是一个带有水平（内联）字段的简单注册表单。