2

我有这个表格：

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

4

1 回答 1

4

Bootstraps 有一些示例表单布局，您可以在此处使用。

根据他们的文档，controls-row当您想要多个在线时使用。（form-inline是为了使整个表单内联）。在继续使用他们的类之前，您需要阅读他们的脚手架文档。

更新了 jsfiddle

PS.. HTML 指针

  1. 不要重复id（name如果可以避免的话）。例如，id="textinput"在整个页面中应该是唯一的。name不必是唯一的，但最好只匹配 id 。
  2. 为标签添加for属性。
于 2013-04-01T21:40:50.653 回答