twitter-bootstrap - 如何使用 twitter bootstrap 正确格式化表单

Question

我知道有.form-inline和.form-horizontal类等，但这让我有几个问题：

1. 这些似乎只与标签如何与其相应的文本字段/复选框等对齐有关。对吗？
2. 我需要创建一个具有：
   • 可能有很多领域和
   • 将它们与 bootstrap 12 col 网格对齐。

我是否需要将每个字段及其标签包装在 adiv中，并给它div一个类名，例如span3？

Answer 1

你的问题不太清楚..无论如何我都会尝试回答！
你想如何在页面中处理输入元素？

下面是创建两个表单的两个 HTML 代码片段。第一个是内联表单，其中所有输入都在同一行上。第二个是水平表单，将表单分成两部分，左侧包含标签，右侧包含输入元素。

<form class="form-inline">
    <label>Input One: </label><input type="text" placeholder="Input One" />
    <label>Input Two: </label><input type="password" placeholder="Input Two" />
    <input type="submit" value="Submit" />
</form>

<form class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="input1">Input One:</label>
            <div class="controls">
                <input id="input1" type="text" placeholder="Input One" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Input Two:</label>
            <div class="controls">
                <input type="text" placeholder="Input Two" />
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Submit</label>
            <div class="controls">
                <input type="submit" value="Submit" />
            </div>
        </div>
    </fieldset>
</form>​

如果您可以更具体一些，我很乐意为您提供帮助。