html - Twitter Bootstrap - 内联表单

Question

我有这个表格:

<!-- First Name-->
    <div class="control-group">
      <label class="control-label">First Name</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Last Name-->
    <div class="control-group inline">
      <label class="control-label">Last Name</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Telefonnumber-->
    <div class="control-group">
      <label class="control-label">Telefonnumber</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Street-->
    <div class="control-group">
      <label class="control-label">Street</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>

我想在名字旁边显示姓氏，并在这两个字段下显示电话号码。

我如何在 Twitter Bootstrap 中实现这一点？

顺便说一句jsfiddle

Answer 1

Bootstraps 有一些示例表单布局，您可以 use here .

根据他们的文档，当您想要在一行上有多个时，请使用 controls-row。 (form-inline 是为了整个表单内联)。您将需要阅读他们的 scaffolding documentation在继续使用他们的类(class)之前。

已更新jsfiddle

PS.. HTML 指针

1. 不要重复id(如果可以避免的话，也不要重复name)。例如，id="textinput" 在整个页面中应该是唯一的。 名称不必是唯一的，但最佳做法是仅匹配 ID。
2. 向标签添加 for 属性。