twitter-bootstrap - 使用 Bootstrap 在表单中排列输入文本字段

Question

我想将一些“标签+文本框”组混合使用水平和垂直排列。Bootstrap 有 form-horizo​​ntal 类，但这会将标签放在右侧而不是顶部。

我想实现的安排是：

First Name        Last Name
[_______________] [______________]

Company Name
[________________________________] 

也就是说，前两个字段（名字和姓氏）的文本框位于同一行，但其标签位于顶部，而不是水平向左，而第三个字段（公司名称）出现在第二行，也与顶部的标签。

实现这一目标的标志是什么？

Answer 1

您可以通过以下方式实现特定形式：
Jsfiddle with Bootstrap Form
在浏览器中查看实时结果

<form class="well span8">
  <div class="row">
    <div class="span3">
        <label>First Name</label>
        <input type="text" class="span3" placeholder="Your First Name">
        <label>Company</label>
        <input type="text" class="span3" placeholder="Company">
    </div>
    <div class="span5">
        <label>Last Name</label>
        <input type="text" class="span3" placeholder="Your Last Name">
    </div>
</div>

Answer 2

据我所知，您必须使用表格使其看起来像这样，并确保“姓氏”文本保留在其框中。您可以使用<br/>标签来分隔行。

<form class="form-inline">
<table>
    <tr>
        <td>
            <label for="fn">First Name</label>
            <br/>
            <input name="fn" type="text" class="input-small" />
        </td>
        <td>
            <label for="ln">Last Name</label>
            <br/>
            <input name="ln" type="text" class="input-small" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <label for="cn">Company Name</label><br/>
            <input type="text" class="input-large" />
        </td>
    </tr>
</table>
</form>