Twitter Bootstrap - 内联表单答案

【问题标题】：Twitter Bootstrap - Inline FormTwitter Bootstrap - 内联表单
【发布时间】：2013-03-23 00:14:09
【问题描述】：

我有这个表格：

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

【问题讨论】：

wtf?我的问题有什么问题？
我没有投反对票，但我认为您的 jsfiddle 链接指向您示例的错误版本...
他们可能认为您应该先阅读参考资料和/或不喜欢您的 jsfiddle 不起作用。我更新了你的小提琴，这里是关于如何使用引导程序进行页面布局的文档：twitter.github.com/bootstrap/scaffolding.html#gridSystem
@darkajax 谢谢你的回答！我更正了！
感谢您的回答！但是，我认为可能有一个 css 类 .form-inline 或 sth。在不使用span6 等的情况下快速解决此问题。

标签： html css forms twitter-bootstrap

【解决方案1】：

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

根据他们的文档，当您想要在一行中使用多个时，请使用 controls-row。（form-inline 用于将整个表单内联）。在继续使用他们的课程之前，您需要阅读他们的scaffolding documentation。

更新jsfiddle

PS.. HTML 指针

不要重复id（如果可以避免的话，不要重复name）。例如，id="textinput" 在整个页面中应该是唯一的。 name 不必是唯一的，但最好只匹配 id。
将for 属性添加到标签。

【讨论】：