1

我发现了一种使用引导网格系统布局表单字段的好方法。请参阅 jsfiddle 链接。 http://jsfiddle.net/kUNVs/

当我在邮政编码字段上贴上标签时，一切看起来都还不错。但是当我使用相同的“逻辑”将标签应用于城市字段时，它位于邮政编码标签下方。或者在第二个例子中，我让它完全适应了布局。

所以问题是，基于上面 jsfiddle 中的示例，我如何向城市字段添加标签并将其定位在城市上方而不是邮政编码？

我试过这个。

<label for="zipcode">Zip Code</label>
<label for="city">City</label>
<div class="controls controls-row">
 <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/>
 <input type="text" id="city" class="span2" placeholder="City"/>
</div>

还有这个

<div class="controls controls-row">
 <label for="zipcode">Zip Code</label>
 <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/>
 <label for="city">City</label>
 <input type="text" id="city" class="span2" placeholder="City"/>
</div>
4

1 回答 1

2

这应该给你一个好的开始：

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

Live Demo - Basic

我刚刚为邮政编码和城市添加了一行，使用两个跨度（.span2和一个.span4）来分隔它们。如果我是你，我也会更新输入本身的跨度类以匹配它们的容器跨度。

Live Demo - With Input Spans

于 2013-03-11T20:08:35.353 回答