2

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

我想要达到的目标

我尝试使用以下 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"/>

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

不正确

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

4

4 回答 4

10

尝试使用以下内容：

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

​这里有一个小提琴

于 2012-09-04T11:31:06.407 回答
1

自定义装订线宽度和跨度宽度，我认为 span24 更适合准确的宽度，装订线宽度 10px 和 span1 30px span2 70px 等 ....告诉我您使用的是 SASS 还是 LESS

如果无礼

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

在您的 sass 文件中，但不要忘记导入引导 sass 文件

还有一件事 - 我在这里忘记了你应该在使用 twitter 引导程序时使用控制组和其他格式；请参考引导网站

于 2012-05-02T14:39:37.600 回答
0

我想如果你只使用'span2'和'span1'类而不使用'inline'类，它只会在网格中显示具有正确边距的布局。看起来是导致错位的边距。

于 2012-05-02T14:55:46.723 回答
0

所以我为此苦苦挣扎了一段时间，终于找到了解决方案。这就是我想出的。这是一个带有水平（内联）字段的简单注册表单。

于 2016-02-17T16:25:14.013 回答