在表单中使用Bootstrap安排输入文本字段

Question

我想把一些“标签+文本框”组放在水平和垂直排列的混合中。 Bootstrap具有表单水平类，但是将标签放在右侧而不是顶部。

我想要达成的安排是：

First Name        Last Name
[_______________] [______________]

Company Name
[________________________________] 

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

这将是实现这一目标的标志吗？

Answer 1

您可以通过以下方式获得特定表格：
Jsfiddle with Bootstrap Form
See Live result in browser

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