Twitter Bootstrap - 内联表单 [英] Twitter Bootstrap - Inline Form

问题描述

我有这种形式：

 <！ - 名字 - > 
< div class =control-group> 
< label class =control-label>名字< / label> 
< div class =controls> 
< input id =textinputname =Product Nameclass =input-xlargetype =text> 
< / div> 
< / div> 
<！ - 姓氏 - > 
< div class =control-group inline> 
< label class =control-label>姓氏< / label> 
< div class =controls> 
< input id =textinputname =Product Nameclass =input-xlargetype =text> 
< / div> 
< / div> 
<！ -  Telefonnumber  - > 
< div class =control-group> 
< label class =control-label>电话号码< / label> 
< div class =controls> 
< input id =textinputname =Product Nameclass =input-xlargetype =text> 
< / div> 
< / div> 
<！ -  Street  - > 
< div class =control-group> 
< label class =control-label>街< / label> 
< div class =controls> 
< input id =textinputname =Product Nameclass =input-xlargetype =text> 
< / div> 
< / div> 
  

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

如何在twitter bootstrap中实现此功能？

btw jsfiddle

解决方案

Bootstraps有几个示例表单布局您可以在这里使用。

根据他们的文档，当你想在一行上使用多个时，使用 controls-row 。 （ form-inline 是整个表单内联的）。在使用课程之前，您需要阅读他们的脚手架文档。 / p>

更新了 jsfiddle

PS .. HTML指针

1. 不要重复 id （和 name 如果你可以避免它）。例如， id =textinput在整个页面上应该是唯一的。 name 不一定是唯一的，但最好只匹配id。


2. 添加 for 属性到标签。

I have this form:

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

I want to display Last Name next to First Name and under these two field the Telefonnumber.

How can I realize this in twitter bootstrap?

btw the jsfiddle

解决方案

Bootstraps has a few example form layouts that you can use here.

As per their documentation, use controls-row when you want multiple on a line. (form-inline is for the whole form to be inline). You will want to read their scaffolding documentation before going forward with using their classes.

Updated jsfiddle

PS.. HTML pointers

1. Don't duplicate id (and name if you can avoid it). For example, id="textinput" should be unique across the entire page. The name doesn't have to be unique, but it's best practice to just match the id.
2. Add for attribute to labels.

这篇关于Twitter Bootstrap - 内联表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！