如何在控件行内使用标签

Question

我正在尝试使用Boostrap来布局具有水平行输入的表单(一个"控制行"),但标签位于表单输入之上.有关示例,请参阅下面的布局.

Boostrap可以实现吗？我试图避免使用一百万行/跨度#divs,但是如果没有很多自定义CSS,就无法找到另一种实现方法.我目前的计划是使用表格进行测试:/请保存我的命运!

LABEL1      LABEL2
| Input |   | Input |

LABEL 3
| Long input         |

LABEL 4      LABEL 5
| Input |   | Input |

Answer 1

我使用控制行和控制组类的组合,在不使用表的情况下完成了这项工作.

<div class="container">
<form>
    <div class="controls-row">
        <div class="control-group">
            <label for="first-name" class="control-label">First Name:</label>
            <div class="controls">
                <input type="text" id="first-name" name="FirstName" />
            </div>                
        </div>
        <div class="control-group">
            <label for="middle-initial" class="control-label">M.I.:</label>
            <div class="controls">
                <input type="text" id="middle-initial" name="MiddleInitial" class="input-mini" />
            </div>                
        </div>
        <div class="control-group">
            <label for="last-name" class="control-label">Last Name:</label>
            <div class="controls">
                <input type="text" id="last-name" name="LastName" />
            </div>                
        </div>
    </div>
    <div class="control-row">
         <div class="control-group">
            <label for="ssn" class="control-label">Social Security Number:</label>
            <div class="controls">
                <input type="text" id="ssn" name="SocialSecurityNumber" />
            </div>                
        </div>
        <div class="control-group">
            <label for="dob" class="control-label">Date of Birth:</label>
            <div class="controls input-append">
                <input type="text" id="dob" name="DateOfBirth" />
                <a href="#" class="btn btn-small"><i class="icon-calendar"></i></a>
            </div>
        </div>           
    </div>
</form> 

​​​​​​​​​​​​​​​

为了让它正常工作(因为控制组div是display: block;,我必须覆盖该类并添加vertical-align: top;以下内容):

.control-group {
    display: inline-block;
    vertical-align: top;
}

结果如下:http://jsfiddle.net/bhGyz/